带有 CSS 和 HTML 的多列答案

【问题标题】：Multiple-columns with CSS and HTML带有 CSS 和 HTML 的多列
【发布时间】：2021-02-18 09:29:14
【问题描述】：

这是我正在处理的网站页面结构的演示：http://jsfiddle.net/kz5ch49w/2/

如您所见，共有 5 个块：正文（灰色）、页眉（红色）、页脚（绿色）、左侧块（黄色）和右侧块（黑色）。

<body>
  <div id="header"></div>
    <div id="content">
      <div id="left-block"></div>
      <div id="right-block"><p>...long text...</p></div>
    </div>
  <div id="footer"></div>
</body>

你认为我的结构还好吗？（您可以在 JSFiddle 演示中看到 CSS）

我的问题是我不明白为什么带有文本的列那么薄，为什么只有第一列是黑色的。我也尝试在右侧块中放置“填充：20px”，但它不起作用（列的高度超过 100%）。我应该在右块 div 中创建一个新 div 吗？

你能帮帮我吗？

这是最新的 JSFiddle 演示更新：http://jsfiddle.net/kz5ch49w/3/

【问题讨论】：

我的建议是使用百分比，这将使列响应视口宽度。现在，这将使它们在视口较小的情况下变薄，例如在 JSFiddle 上，您可以使用 CSS 媒体查询根据视口宽度动态更改元素的大小和位置。
感谢您的回答：页眉、页脚和左块都可以。但是黑色背景仍然没有填满整个右块（黑色有一个区域，灰色有一个区域）。

标签： html css css-multicolumn-layout

【解决方案1】：

试试这个：用这个 css 替换你的 css：

body { background: none repeat scroll 0 0 grey;
    float: left;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    width: 100%; }
#header {
    background: none repeat scroll 0 0 red;
    float: left;
    height: 80px;
    left: 0;
    top: 0;
    width: 100%;
}
#content {
    float: left;
    overflow: hidden;
    width: 100%;
}

#left-block {
    background: none repeat scroll 0 0 yellow;
    float: left;
    height: 250px;
    width: 25%;
}
#right-block {
    -moz-column-gap: 40px;
    -moz-columns: auto 300px;
    background: none repeat scroll 0 0 black;
    color: white;
    float: left;
    font-family: "open sans";
    font-size: 15px;
    font-weight: 100;
    height: 100%;
    left: 300px;
    text-align: left;
    width: 75%;
}
#footer {
    background: none repeat scroll 0 0 green;
    float: left;
    height: 80px;
    width: 100%;
}

【讨论】：

不幸的是，它似乎没有修复它（只有一个大列，它会生成一个垂直滚动条）。我对 jsfiddle 演示进行了一些个人更改，它比我第一次尝试更好：jsfiddle.net/kz5ch49w/3 但是黑色背景仍然没有填满整个右块，我也不知道如何解决 padding:20px 问题.
感谢您不使用AP。

【解决方案2】：

您遇到了overflow 问题。 #text 中的内容超出了div 的维度。因此，它不会扩展。您需要告诉 CSS 对 overflow、which I've done here where it's been fixed 做什么。

到#right-block，我添加了overflow-y: auto，意思是如果它太长并且还有东西溢出，它会添加一个滚动条。

另外，对于#text，我添加了box-sizing: border-box;，这样填充不会使框变大，从而影响尺寸。这有时会导致垂直滚动，您似乎想避免这种情况。

希望这对您有所帮助！

【讨论】：

此外，我建议查找 CSS 溢出以真正微调此修复。
非常感谢您的帮助，这几乎就是我想要的。我也希望左框可以与右块一起滚动。这是我在这里所做的：jsfiddle.net/kz5ch49w/36 但是，现在，我希望水平滚动条位于页面底部。

【解决方案3】：

试试这个。

     #content {
top: 80px;
bottom: 80px;
position: relative;
}

【讨论】：

感谢您的回答，但不再有水平滚动条，黑色背景不可见，黄色左侧块也可见。 jsfiddle.net/kz5ch49w/27

【解决方案4】：

请从您的代码中删除所有位置。对于侧面菜单，只需添加 float:left 或 float:right 。 jsfiddle link

body {
background:grey;
margin:0;
padding:0;
}

#header {
width:100%;
height:80px;
left:0;
top:0;
background:red;
}

#content {
top:80px;
bottom:80px;
width:700px;
height:900px;
}

#left-block {
background:#FF0;
width:100px;
height:100%;
float:left;
}

#right-block {
background:#000;
left:100px;
width:auto;
height:100%;
float:right;
font-size:15px;
text-align:left;
color:#FFF;
font-family:'open sans';
-webkit-column-width:300px;
-webkit-column-gap:40px;
-moz-column-width:300px;
-moz-column-gap:40px;
-moz-column-count:auto;
column-width:300px;
column-gap:40px;
font-weight:100;
}

#footer {
width:100%;
height:80px;
left:0;
bottom:0;
background:green;
}

【讨论】：

感谢您的回答，列文本正常，但页脚不再可见，左侧块也不再可见。 jsfiddle.net/kz5ch49w/26
看来你已经得到答案了。干杯

【解决方案5】：

    @Guillaume: I think it may be resolved. Please check this code and follow this link.
http://jsfiddle.net/kz5ch49w/32/


    <body>
    <style>
    .ftDiv{ max-width:1000px; margin:auto;}
    #header { width: 100%; background:#F00; padding:10px; color:#fff; font-weight:700; text-align:center;}
    #content { display:table;}
    #left-block {  background:#CF3; width:30%; display:table-cell; vertical-align:middle; text-align:center;} 
    #right-block { padding:10px;  background:#000;  font-size:15px; text-align: left; color:#FFF; font-family:'open sans';font-weight:100; display:table-cell; width:67.5%;  vertical-align:top;}
    #footer { width: 100%; height:80px;background:#090; text-align:center; color:#fff; display:inline-block; vertical-align:middle; }
    </style>
    <div class="ftDiv">

    <div id="header">Header Part Here</div>

    <div id="content">

    <div id="left-block">Left Part Here</div>

    <div id="right-block">

    <p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia) querebatur, quod omnibus in rebus homines diligentiores essent; capras et oves quot quisque haberet, dicere posse, amicos quot haberet, non posse dicere et in illis quidem parandis adhibere curam, in amicis eligendis neglegentis esse nec habere quasi signa quaedam et notas, quibus eos qui ad amicitias essent idonei, iudicarent. Sunt igitur firmi et stabiles et constantes eligendi; cuius generis est magna penuria. Et iudicare difficile est sane nisi expertum; experiendum autem est in ipsa amicitia. Ita praecurrit amicitia iudicium tollitque experiendi potestatem.</p>

    <p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>

    <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix interneciva aegre vestigia claritudinis pristinae monstrat admodum pauca.</p>

    <p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?</p>

    <p>Quibus ita sceleste patratis Paulus cruore perfusus reversusque ad principis castra multos coopertos paene catenis adduxit in squalorem deiectos atque maestitiam, quorum adventu intendebantur eculei uncosque parabat carnifex et tormenta. et ex is proscripti sunt plures actique in exilium alii, non nullos gladii consumpsere poenales. nec enim quisquam facile meminit sub Constantio, ubi susurro tenus haec movebantur, quemquam absolutum.</p>

    <p>Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam.</p>

    <p>Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit.</p>

    <p>Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent.</p>

    <p>Hacque adfabilitate confisus cum eadem postridie feceris, ut incognitus haerebis et repentinus, hortatore illo hesterno clientes numerando, qui sis vel unde venias diutius ambigente agnitus vero tandem et adscitus in amicitiam si te salutandi adsiduitati dederis triennio indiscretus et per tot dierum defueris tempus, reverteris ad paria perferenda, nec ubi esses interrogatus et quo tandem miser discesseris, aetatem omnem frustra in stipite conteres summittendo.</p>

    <p>Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per omnia diffuso propinqua, magnis undique praesidiis conmunitam.</p>

    <p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia) querebatur, quod omnibus in rebus homines diligentiores essent; capras et oves quot quisque haberet, dicere posse, amicos quot haberet, non posse dicere et in illis quidem parandis adhibere curam, in amicis eligendis neglegentis esse nec habere quasi signa quaedam et notas, quibus eos qui ad amicitias essent idonei, iudicarent. Sunt igitur firmi et stabiles et constantes eligendi; cuius generis est magna penuria. Et iudicare difficile est sane nisi expertum; experiendum autem est in ipsa amicitia. Ita praecurrit amicitia iudicium tollitque experiendi potestatem.</p>

    <p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>

    <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix interneciva aegre vestigia claritudinis pristinae monstrat admodum pauca.</p>

    <p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?</p>

    <p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia) querebatur, quod omnibus in rebus homines diligentiores essent; capras et oves quot quisque haberet, dicere posse, amicos quot haberet, non posse dicere et in illis quidem parandis adhibere curam, in amicis eligendis neglegentis esse nec habere quasi signa quaedam et notas, quibus eos qui ad amicitias essent idonei, iudicarent. Sunt igitur firmi et stabiles et constantes eligendi; cuius generis est magna penuria. Et iudicare difficile est sane nisi expertum; experiendum autem est in ipsa amicitia. Ita praecurrit amicitia iudicium tollitque experiendi potestatem.</p>

    <p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>

    <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix interneciva aegre vestigia claritudinis pristinae monstrat admodum pauca.</p>

    <p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?</p>

    </div>

    </div>

    <div id="footer">Footer Part Here</div>
    </div>
    </body>

【讨论】：