Question

我试图保持一个列表块（用于导航）与一个包含图像的文本块内联。我目前的问题是它似乎工作，直到我将浏览器扩展到全屏大小，此时列表位于文本块的顶部。 HTML代码：

<body>
     <ul>
          <li>Something1</li>
          <li>Something2</li>
          <li>Something3</li>
     </ul>
<div>
     <section>
          <img>
          <p>Lorem ipsum...</p>
          <p>Lorem ipsum...</p>
     </section>
</div>
</body>

CSS代码：

ul{
    width:15%;
    font-family:arial;
    font-size:12px;
    float:left;
    border:2px solid black;
}

section{
    width:80%;
    font-family:arial;
    font-size:12px;
    float:left;
    padding:0;
    border:2px solid black;
}

Answer 1

您可以在此处应用此代码：

ul, section {
    float:left;
    display: inline-block;
    box-sizing: border-box;
}

ul{
    width:15%;
    font-family:arial;
    font-size:12px;
    border:2px solid black;
}

section{
    width:80%;
    font-family:arial;
    font-size:12px;
    padding:0;
    border:2px solid black;
}

使用border-box时，填充和边框会减少width + padding + border等于该元素内容width的元素的宽度。

当您浮动元素时，您应始终将它们设为display: inline或display: inline-block。

代码的问题在于边框也会影响元素的宽度 - 当涉及到％宽度时，这是一个问题，因为您的元素将是x% + border。

jsfiddle

修改

这样的东西？有关高级布局的fiddle，请查看：getbootstrap.com

注意：并且，正如另一位用户所提到的，您应该只对同一级别的元素使用float（两个元素具有相同的父级）。

Answer 2

我想问的问题是你没有计算ul的填充，尝试设置padding: 0;，否则你会得到更多100％width和{{1}在div下的幻灯片。 BTW为什么要在ul包裹section？

列在HTML / CSS中的文本块和图像旁边

2 个答案: