[英]floating fluid and fixed width element
I've also tried with display:table-cell but couldn't get it working correctly. 我也尝试过使用display:table-cell,但无法正常工作。 Click here for demo
点击此处进行演示
HTML HTML
<div id="sticky-bar" class="cf">
<div id="c1" class="left">col 1</div>
<div id="c2" class="left">col 2</div>
<div id="c3">
<span class="incredibly-long-txt">So many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many tex</span>
</div>
<div id="c4">
<ul class="mmenu">
<li>
<a href="#" class="show-sub">m1</a>
<ul class="smenu">
<li>
<a href="#">a1</a>
</li><li>
<a href="#">a2</a>
</li><li>
<a href="#">a3</a>
</li><li>
<a href="#">a4</a>
</li>
</ul>
</li>
<li>
<a href="#" class="show-sub">m2</a>
<ul class="smenu">
<li>
<a href="#">b1</a>
</li><li>
<a href="#">b2</a>
</li><li>
<a href="#">b3</a>
</li><li>
<a href="#">b4</a>
</li>
</ul>
</li>
<li>
<a href="#" class="show-sub">m3</a>
<ul class="smenu">
<li>
<a href="#">c1</a>
</li><li>
<a href="#">c2</a>
</li><li>
<a href="#">c3</a>
</li><li>
<a href="#">c4</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS CSS
*, *:before, *:after {
box-sizing: border-box;
}
ul, li {
margin: 0;
padding:0;
list-style:none;
}
a {
color: #fff;
}
.left {
float: left;
}
.right {
float: right;
}
.cf:before, .cf:after {
content:'';
display: table;
}
.cf:after {
clear:both;
}
.cf {
*zoom: 1;
}
#sticky-bar {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
display: block;
width: 100%;
height: 30px;
background: #582A72;
position: relative;
}
#c1 {
width: 100px;
height: 100%;
background: #9775AA;
padding: 6px;
}
#c2 {
width: 150px;
height: 100%;
background: #764B8E;
padding: 6px;
}
#c3 {
height: 100%;
background: #3D1255;
padding: 6px;
margin: 0 90px 0 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#c4 {
background: #260339;
position: absolute;
right:0;
top:0;
}
.mmenu {
display:block;
}
.mmenu li {
float:left;
width: 30px;
height: 30px;
text-align: center;
border-left: 1px solid #fff;
background: #887CAF;
}
.mmenu li a {
display: block;
width: 100%;
height: 100%;
padding: 6px 0;
position: relative;
}
.smenu {
display: none;
background: #403075;
position: absolute;
top: 100%;
right: 0;
width: 120px;
}
.smenu li {
background: #882D61;
}
.show-sub:hover + .smenu {
display: block;
}
Have you considered placing #c1 and #c2 inside #c3. 您是否考虑过将#c1和#c2 放在 #c3中。 It would allow you to set their specific width, float them left or right, thus giving the illusion that #c3 is filling the empty space.
它将允许您设置它们的特定宽度,向左或向右浮动它们,从而给人以#c3填充空白的错觉。 I prefer to use tables in the case I need empty space filled.
在需要填充空白的情况下,我更喜欢使用表。 It's my experience that it requires drastically more markup to achieve liquid width with divs than tables.
根据我的经验,与div相比,使用div来实现液体宽度需要更多的标记。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.