Question

我有一个流畅的布局。我需要2个div在水平方向上彼此相邻并占据完整的可用宽度。第二个div需要是其内容的宽度，因此第一个div应该占用剩余的空间。

这是我的尝试： http://jsfiddle.net/jamesbrighton/N2prR/2/

它的工作除了#other的背景延伸到#button之后。我的实际网站#other也有一个背景图像设置在右边。这意味着我需要背景颜色和图像才能扩展到#button，而不是超出它。谢谢

Answer 1

所有两个div中的第一个应该浮动。（如果不是它们存在于不同的“层”和重叠）

至于自动宽度的东西，我认为你不能用html轻松做到这一点。根据我的经验，使用div设置宽度/高度总是更好。

如果你想要你可以使用2 td表（一个设置为100％宽度，另一个设置宽度 - 例如200px）

祝你好运

Answer 2

<style>
#other {
    background-color: blue;
width: 40%;
}
#button {
   background-color: gold;
   float: right;
   border-radius: 10px;
   width: 60%; 
}
.clear{
   clear: both;
}

<div id="parent"> 
 <div id="button">
    Submit Submit Submit Submit Submit Submit Submit Submit Submit Submit
 </div> 
 <div id="other"> 
   Some other content
 </div>
<div class="clear"></div>
</div>

强制要求您提供第一个＆lt; div＆gt;一些以百分比固定。第二个文本将自动换行。

液体布局中水平对齐的div - 背景延伸到其他背后

2 个答案: