html - 左侧小面板 - float 不能正常工作 HTML CSS

Question

我正在处理布局，但遇到了一个小问题。我留下了面板( block 元素)和其他网站内容。当页面右侧的内容没有很多标志时，我正在这个父 float:right 上使用它并且它正在工作。当我有大量的文本时，它的一切都崩溃了。当我删除 float:right 时，您可以在下面看到我的页面。

http://i.imgur.com/MZ99cFP.png

左面板有 float:left。我怎样才能像这样分离这些内容:

http://i.imgur.com/DKJY7fA.png

我正在尝试使用 display:inline-block 但它不起作用。

我的文件结构:

<div id="container">
  <div id="left-panel">
    <!-- LEFT PANEL -->
  </div>
  <div id="right-panel">
    <!-- RIGHT CONTENT -->
  </div>
</div>

我在 jsfiddle 中的代码:http://jsfiddle.net/uuz2b8mr/

Answer 1

您可以通过几种方法解决该问题:

方法 1 - 固定两列的宽度

• 基本上为两列设置固定宽度，它们的组合宽度将是父级的宽度:
• 例如:.left-col: width: 25%;右列:宽度 75%； (也可能需要一些 float )

.left-col {
  width: 25%;
  background: blue;
  
  float: left;
}
.right-col {
  width: 75%;
  background: yellow;
  
  float: left;
}

<div class="left-col">here be: the sidebar</div>
<div class="right-col">here be: a bunch of stuff Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare et velit a accumsan. Sed sed venenatis tortor. Morbi accumsan, ante sed laoreet varius, est purus euismod dolor, ut laoreet magna neque nec felis. Morbi
  vestibulum metus eget nibh viverra, et bibendum ex hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sollicitudin, est nec placerat ornare, purus justo consectetur diam, vitae ultrices urna nisl
  eu ante. Integer sed ipsum gravida, posuere arcu eu, posuere tortor. Integer porttitor maximus tincidunt. Duis viverra risus ac gravida vehicula. Cras sagittis velit a dolor finibus venenatis in a magna. Maecenas consequat velit mauris, nec tempus nulla
  lacinia sit amet. Phasellus libero ante, elementum eget diam id, ultrices tincidunt ante. Integer id interdum urna, vel dignissim elit. Ut tincidunt, nisi vel interdum auctor, nisi velit aliquet tortor, eu viverra risus magna eu urna. Nulla et sodales
  sem. Ut tincidunt nibh eu dolor feugiat vehicula. Curabitur ac vestibulum sem. Nunc nec congue mi, tristique iaculis odio. Curabitur commodo tellus mi, vitae pellentesque metus porttitor nec. In rhoncus dolor a lorem lobortis sollicitudin.</div>

方法二 - 侧边栏 float ，内容溢出

• 这里侧边栏是 float 的；
• 内容有一个 display: block 应用于它，还有一个 overflow: hidden 规则，这将根据其兄弟 float 将内容推向左/右和宽度 Prop 。;
• 你不需要任何固定宽度就可以工作，但是其中一个标签必须 float

.left-col{
  float: left;
  background: blue;
}
.right-col{
  display: block; /*may or may not be necesary depending on ur tag*/
  overflow: hidden;
  background: yellow;
}

<div class="left-col">here be: the sidebar</div>
<div class="right-col">here be: a bunch of stuffLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare et velit a accumsan. Sed sed venenatis tortor. Morbi accumsan, ante sed laoreet varius, est purus euismod dolor, ut laoreet magna neque nec felis. Morbi
  vestibulum metus eget nibh viverra, et bibendum ex hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sollicitudin, est nec placerat ornare, purus justo consectetur diam, vitae ultrices urna nisl
  eu ante. Integer sed ipsum gravida, posuere arcu eu, posuere tortor. Integer porttitor maximus tincidunt. Duis viverra risus ac gravida vehicula. Cras sagittis velit a dolor finibus venenatis in a magna. Maecenas consequat velit mauris, nec tempus nulla
  lacinia sit amet. Phasellus libero ante, elementum eget diam id, ultrices tincidunt ante. Integer id interdum urna, vel dignissim elit. Ut tincidunt, nisi vel interdum auctor, nisi velit aliquet tortor, eu viverra risus magna eu urna. Nulla et sodales
  sem. Ut tincidunt nibh eu dolor feugiat vehicula. Curabitur ac vestibulum sem. Nunc nec congue mi, tristique iaculis odio. Curabitur commodo tellus mi, vitae pellentesque metus porttitor nec. In rhoncus dolor a lorem lobortis sollicitudin.</div>

方法 3 - 表格技巧

• 这需要某种包装器来容纳侧边栏和内容；
• 包装器应用了 display: table，侧边栏和内容都应用了 display: table-cell；
• 您可能需要在侧边栏和内容中使用一些额外的包装器，因为两者都会延伸到较长的那个，以防您对其中一个应用了某种背景颜色
• 不需要固定宽度

.left-content,
.right-content{
  display: table-cell;
}
.left-content{
  background: blue;
}
.right-content{
  background: yellow;
}
.content-wrapper{
  display: table;
}

<div class="content-wrapper">
  <div class="left-content">
    here be: the sidebar
  </div>
  <div class="right-content">
    here be: a bunch of stuff Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare et velit a accumsan. Sed sed venenatis tortor. Morbi accumsan, ante sed laoreet varius, est purus euismod dolor, ut laoreet magna neque nec felis. Morbi vestibulum metus eget nibh viverra, et bibendum ex hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sollicitudin, est nec placerat ornare, purus justo consectetur diam, vitae ultrices urna nisl eu ante. Integer sed ipsum gravida, posuere arcu eu, posuere tortor. Integer porttitor maximus tincidunt. Duis viverra risus ac gravida vehicula.

Cras sagittis velit a dolor finibus venenatis in a magna. Maecenas consequat velit mauris, nec tempus nulla lacinia sit amet. Phasellus libero ante, elementum eget diam id, ultrices tincidunt ante. Integer id interdum urna, vel dignissim elit. Ut tincidunt, nisi vel interdum auctor, nisi velit aliquet tortor, eu viverra risus magna eu urna. Nulla et sodales sem. Ut tincidunt nibh eu dolor feugiat vehicula. Curabitur ac vestibulum sem. Nunc nec congue mi, tristique iaculis odio. Curabitur commodo tellus mi, vitae pellentesque metus porttitor nec. In rhoncus dolor a lorem lobortis sollicitudin.
  </div>
</div>

方法 4 - Flexbox

• 这是很新的，但是它很快被新的浏览器采用，并且可能会有所帮助，具体取决于您的情况
• 基本上，一个包装器包含侧边栏和内容，并应用了 display:flex(可能还需要一些供应商前缀)
• 不需要固定宽度
• 可以找到更全面的指南 here

.content-wrapper {
	display: flex;
}

.left-col {
  min-width: 100px;/*may be necesarry depending or ur layout*/
  background: blue;
}

.right-col{
  background: yellow;
}

<div class="content-wrapper">
  <div class="left-col">here be the sidebar</div>
  <div class="right-col">here be the content metus eget nibh viverra, et bibendum ex hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sollicitudin, est nec placerat ornare, purus justo consectetur diam, vitae ultrices urna nisl eu ante. Integer sed ipsum gravida, posuere arcu eu, posuere tortor. Integer porttitor maximus tincidunt. Duis viverra risus ac gravida vehicula.

Cras sagittis velit a dolor finibus venenatis in a magna. Maecenas consequat velit mauris, nec tempus nulla lacinia sit amet. Phasellus libero ante, elementum eget diam id, ultrices tincidunt ante. Integer id interdum urna, vel dignissim elit. Ut tincidunt, nisi vel interdum auctor, nisi velit aliquet tortor, eu viverra risus magna eu urna. Nulla et sodales sem. Ut tincidunt nibh eu dolor fe</div>
</div>

我很确定那里有一些更通用的解决方案，但希望这会帮助您前进。