左侧小面板-浮动字体无法正常运行HTML CSS

debugcn 发表于 Dev

销售

我正在布局上，但有一个小问题。我有左面板（块元素）和其他网站内容。当页面正确站点中的内容没有太多迹象表明我正在此父级上使用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/

陆军特种部队

您可以通过以下两种方法解决该问题：

方法1-两列的固定宽度

基本上为两列都设置了固定的宽度，它们的组合宽度将是父级的宽度：
例如：.left-col：宽度：25％；right-col：宽度75％；（也可能需要一些浮动）

.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>

方法2-浮动侧边栏，溢出内容

边栏在这里浮动；
该内容已display: block应用到该overflow: hidden规则，并将根据其同级float和width属性将内容推向左/右。
您不需要任何固定的宽度即可工作，但是其中一个标签必须浮动

.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应用；
您可能需要在侧边栏和内容中同时使用一些额外的包装，因为如果其中一种应用了某种bg颜色，则两者都将延伸到较长的包装上
不需要固定的宽度

.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应用于其（也可能需要一些供应商前缀）
不需要固定的宽度
可以在这里找到更全面的指南

.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>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。