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

Question

I am attempting to keep a list block (used for navigation) inline with with a block of text which also contains an image. 我正在尝试使列表块（用于导航）与也包含图像的文本块保持一致。 My current issue is that it appears to work until I expand the browser to the full screen size at which point the list sits on top of the block of text. 我当前的问题是，在我将浏览器扩展到全屏大小之前，它似乎一直有效，此时列表位于文本块的顶部。 HTML Code: 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 Code: 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

You can apply this code here: 您可以在此处应用此代码：

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;
}

When using border-box the padding and border will reduce the width of the element that width + padding + border equals the width of the content of that element. 当使用border-box ，padding和border会减小元素的宽度，即width + padding + border等于该元素内容的width 。

When you float elements you should always make them display: inline or display: inline-block . 浮动元素时，应始终使它们display: inline或display: inline-block 。

The problem with your code is that the border affects the width of your element too - this is a problem when it comes to % width because your element will be x% + border . 您的代码的问题在于，边框也会影响元素的宽度-当涉及％width时，这是一个问题，因为您的元素将是x% + border 。

jsfiddle 的jsfiddle

Edit 编辑

Something like this? 像这样吗 fiddle for advanced layouts have a look at: getbootstrap.com 摆弄高级布局的小提琴看看： getbootstrap.com

Note: And, as another user mentioned, you should only use float on elements on the same level (both elements have the same parent). 注意：而且，正如另一个用户提到的那样，您只应在同一级别的元素上使用float （两个元素具有相同的父元素）。

Answer 2

Well the problem I guess is that you are not calculating the padding of the ul , try setting padding: 0; 好吧，我想的问题是您没有计算ul的填充，请尝试将padding: 0;设置为padding: 0; otherwise you get more the 100% width in total and the div slides under the ul . 否则，您将获得总计100％的width ，并且div在ul下滑动。 BTW why are you wrapping a section in a div ? 顺便说一句，为什么要在div包装一section ？

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-02-12 07:51:21

解决方案2
0 2015-02-12 07:50:52

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-02-12 07:51:21

解决方案2 0 2015-02-12 07:50:52

解决方案1
1 已采纳 2015-02-12 07:51:21

解决方案2
0 2015-02-12 07:50:52