Question

我正在尝试CSS。我正在使用left属性构建一种两列布局，但遇到了麻烦。我不明白，因为缩小页面时右列的内容（div.right）下降了。我在哪里错了？

body,
html {
  height: 100%;
}

.sinistra {
  float: left;
  width: 47%;
  margin: 1.5%;
  margin-right: 0%;
  padding-right: 1.4%;
  text-align: justify;
  border-right: thin dotted;
  height: 90%;
}

.destra {
  float: right;
  width: 47%;
  margin: 1.5%;
  text-align: justify;
  word-wrap: break-word;
  height: 90%;
}

.piede {
  background-color: grey;
}

.fix::after {
  content: "";
  clear: both;
  display: table;
}

<div class="fix">
  <div class="sinistra">Lorem ipsum dolor sit amet, cum omnium accumsan at, usu accusam legendos consequat at. Feugait tractatos adipiscing nam ad. Ius no oratio deseruisse, nec quaestio repudiare argumentum ne. Cu erant essent sed. Usu facete invenire argumentum ex, ut sint
    brute discere his. Enim veri praesent at sea, vis ex utroque detraxit partiendo. Ex est suscipiantur voluptatibus. An has rebum offendit. Mei ut ocurreret laboramus, quas aperiam ponderum ut vix. Alterum nonumes et pri. Te agam incorrupte mea, ei
    eum utroque efficiendi. Sit mundi dolorem detraxit ea, ea vel quem principes. Ad volutpat sadipscing quo, labore maiorum ex eos. Per solum omnium graecis in, ea sea iisque commodo. Ne invidunt sapientem duo, sit ex stet clita luptatum. Errem diceret
    constituam id pro. No usu recusabo voluptaria. Mei mollis docendi convenire ut, mel cu cibo appareat evertitur.Lorem ipsum dolor sit amet, cum omnium accumsan at, usu accusam legendos consequat at. Feugait tractatos adipiscing nam ad. Ius no oratio
    deseruisse, nec quaestio repudiare argumentum ne. Cu erant essent sed. Usu facete invenire argumentum ex, ut sint brute discere his. Enim veri praesent at sea, vis ex utroque detraxit partiendo. Ex est suscipiantur voluptatibus. An has rebum offendit.
    Mei ut ocurreret laboramus, quas aperiam ponderum ut vix. Alterum nonumes et pri. Te agam incorrupte mea, ei eum utroque efficiendi. Sit mundi dolorem detraxit ea, ea vel quem principes. Ad volutpat sadipscing quo, labore maiorum ex eos. Per solum
    omnium graecis in, ea sea iisque commodo. Ne invidunt sapientem duo, sit ex stet clita luptatum. Errem diceret constituam id pro. No usu recusabo voluptaria. Mei mollis docendi convenire ut, mel cu cibo appareat evertitur. Ius aperiri gloriatur ne,
    est ei quaestio pertinacia disputationi, cum eu omnis delectus antiopam.…</div>
  <div class="destra">
    Lorem ipsum dolor sit amet, cum omnium accumsan at, usu accusam legendos consequat at. Feugait tractatos adipiscing nam ad. Ius no oratio deseruisse, nec quaestio repudiare argumentum ne. Cu erant essent sed. Usu facete invenire argumentum ex, ut sint
    brute discere his. Enim veri praesent at sea, vis ex utroque detraxit partiendo. Ex est suscipiantur voluptatibus. An has rebum offendit. Mei ut ocurreret laboramus, quas aperiam ponderum ut vix. Alterum nonumes et pri. Te agam incorrupte mea, ei
    eum utroque efficiendi. Sit mundi dolorem detraxit ea, ea vel quem principes. Ad volutpat sadipscing quo, labore maiorum ex eos. Per solum omnium graecis in, ea sea iisque commodo. Ne invidunt sapientem duo, sit ex stet clita luptatum. Errem diceret
    constituam id pro. No usu recusabo voluptaria. Mei mollis docendi convenire ut, mel cu cibo appareat evertitur.Lorem ipsum dolor sit amet, cum omnium accumsan at, usu accusam legendos consequat at. Feugait tractatos adipiscing nam ad. </div>
</div>


<div class="piede">Piede</div>

Code on jsfiddle

Answer 1

请考虑在box-sizing:border-box上使用.sinistra并调整宽度以补偿边框的厚度，并将.sinstra上的填充更改为1.5％。

.sinistra {
float: left;
width: 48.5%;
margin: 1.5%;
margin-right: 0%;
padding-right: 1.5%;
text-align: justify;
border-right: thin dotted;
height: 90%;
box-sizing: border-box;

}

更多阅读内容：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 2

在代码中添加box-sizing: border-box;，最好是这样：

body * {
box-sizing: border-box;
}

左两列布局无法正常工作

2 个答案: