流體格寬

<div id="post"> 
    <img src="image.png"/> 
    <div class="postbox"> 
     some content here 
    </div> 
</div>

我如何使`.postbox'將其寬度擴大到相對於圖像寬度或無圖像的最大寬度？流體格寬

#post{ 
width:569px; 
overflow:hidden 
} 
#post img, #post .postbox{ 
float:left 
}

我試圖width:100%到.postbox但它佔用了整個寬度。

http://jsfiddle.net/FTY4k/

來源

2011-12-05 FBwall

不上浮它剩下的就是怎麼樣。你可以將「」浮起來嗎？ – Bojangles

@JamWaffles仍然不佔用圖像的整個寬度寬度 – FBwall

.postbox { width:100% }

這將使格的寬度相同容器

來源

2011-12-05 22:19:51 Robo

是的，它延伸到父母的寬度，使圖像不內聯。 – FBwall

後來看到了。醉酒時不應該張貼。回答撤回。 – SpaceBeers

我把你的問題意味着將div擴展到相對於post div的最大值。如前所述，如果您從郵政信箱中刪除浮標，其寬度爲100％，並在浮動圖像周圍流動。 http://jsfiddle.net/FTY4k/1/ – Robo

如果它不弄亂你的佈局，你可以漂浮的形象，而不是股利。

#post{ 
width:569px; 
overflow:hidden; 
} 
#post img{ 
float:left; 
}

來源

2011-12-05 22:23:33 Will

非常棒，謝謝！但是等一下，它仍然佔據整個寬度，只有文本在調整。 – FBwall

使用CSS float將元素拉出流程。從某種意義上說，即使在DOM樹中它仍然是父，您的img和div class="postbox" a也不再包含在div id="post"中。

你可以嘗試設置，而不是使用float那些inline-block，或者漂浮在一起withing內的div並有clear，都在id="post"

更多細節包含一定程度上取決於你在做什麼你的大局觀試圖在佈局中做。

來源

2011-12-05 22:29:42

對於像這樣的情況，我喜歡使用Nicole Sullivan的media對象抽象。這裏有一個fiddle（供參考）。

HTML：

<div class="media"> 
    <a href="#" class="img"><img src="http://placehold.it/100" alt="" /></a> 
    <div class="bd">lorem dolor...</div> 
</div>

CSS：

.media {margin:10px;} 
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;} 
.media .img {float:left; margin-right: 10px;} 
.media .img img {display:block;} 
.media .imgExt {float:right; margin-left: 10px;}

來源

2013-12-08 19:56:34 skube

回答

相關問題