我在外部一個內(nèi)部有2個嵌套的div，寬度為100％。兩個嵌套的div應(yīng)該在一行中，并且首先應(yīng)該從其內(nèi)容中獲取其大小：<div id="#outer" style="width:100%; border:1px"> <div id="#inner1" style="border:1px; display:inline"> inner div 1. Some text... </div> <div id="#inner2" style="width:100%????; border:1px; display:inline"> inner div 2... </div></div>問題是，如果未指定＃inner1 div的寬度，并且取決于它的內(nèi)部寬度，如何使＃inner2 div獲得其余的水平空間？PS在我的情況下，所有樣式都放在單獨(dú)的類中，在這里我將CSS放入樣式屬性中只是為了簡化。我希望結(jié)果能在IE7 +和FF 3.6中使用對我來說，更多詳細(xì)信息如下： <style type="text/css">.captionText{ float:left;} .captionLine{ height: 1px; background-color:black; margin: 0px; margin-left: 5px; margin-top: 5px; border: 0px; padding: 0px; padding-top: 1px;} </style><table style="width:300px;"><caption width="100%"> <div class="captionText">Some text</div> <div class="captionLine"> </div></caption> <tr> <td>something</td> </tr></table>
3 回答
慕神8447489
TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超1個贊
神秘的人overflow: hidden;是你的朋友。它阻止了與浮動相鄰的元素在浮動之后延伸—我想這就是您要尋找的布局。
以下是一些經(jīng)過稍微編輯的HTML：我認(rèn)為您#的ids中不能包含字符：
<div id="outer">
<div id="inner1">
inner div 1. Some text...
</div>
<div id="inner2">
inner div 2...
</div>
</div>
這是實(shí)現(xiàn)所需布局的CSS。
（我為帶有HTML 條件注釋的 IE 6添加了其他CSS 。我只是注意到您實(shí)際上也不需要它在IE 6中也可以工作，但是如果您想對IE 6用戶好一點(diǎn)的話...）
<style type="text/css">
#outer {
overflow: hidden;/* Makes #outer contain its floated children */
width: 100%;
/* Colours and borders for illustration purposes */
border: solid 3px #666;
background: #ddd;
}
#inner1 {
float: left;/* Make this div as wide as its contents */
/* Colours and borders for illustration purposes */
border: solid 3px #c00;
background: #fdd;
}
#inner2 {
overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */
/* Colours and borders for illustration purposes */
border: solid 3px #00c;
background: #ddf;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#inner2 {
zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */
}
#inner1 {
margin-right: -3px;/* Fix the 3-pixel gap that the previous rule introduces. (Shit like this is why web developers hate IE 6.) */
}
</style>
<![endif]-->
經(jīng)過測試并在IE 6、7和8中工作；Firefox 3.5；和Chrome 4。
臨摹微笑
TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個贊
如果您現(xiàn)在正在閱讀此書，則可以使用calc，請多謝。
的HTML
<div class="universe">
<div class="somewidth">
</div>
<div class="everythingelse">
</div>
</div>
的CSS
.universe {
width: 100%;
height: 100%;
}
.somewidth {
width: 200px;
height: 100%;
}
.everythingelse {
width: 800px; /* fallback for emergencies */
width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
height: 100%;
}
請參閱JSFiddle上的工作示例。
富國滬深
TA貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個贊
從您的代碼看來，您正在嘗試獲取一條水平線以填充div中的空白區(qū)域。如果我是對的，那么您希望創(chuàng)建帶有標(biāo)記的視覺效果。如果我錯了糾正我。
（很高興看到您想要的圖像）
例：
Title ---------------------------
or
Title: Caption ------------------
這不是最佳實(shí)踐。您應(yīng)該嘗試使用CSS達(dá)到這種效果。
首先嘗試使代碼更具語義：
<div id="#outer" style="width:100%; border:1px">
<h3 style="border:1px; display:inline">
Caption
</h3>
</div>
要獲得這一行：
用所需的顏色創(chuàng)建圖像
使它的高度與您希望線條以px為單位
用background 屬性定位
。
#outer h3 {
display: inline;
background-color: #000;
color: #FFF;
}
#outer {
width: 100%; /* is the default of block element but just for celerity */
background: #000 url('image path') center left; /* position the image */
}
添加回答
舉報
0/150
提交
取消