3格，并排排列，中间一个水平排列，其他占据剩余空间，不在中间格后面

我一直在寻找论坛，我找不到类似的问题。在我看来，一个简单的overflow:hidden能解决这个问题，但它是不工作...3格，并排排列，中间一个水平排列，其他占据剩余空间，不在中间格后面

我在这里创造一个例子： http://www.estrelasustentavel.pt/demo

那么，是什么想是有“侧“divs（左侧和右侧）占据中央div（水平对齐）留下的所有空间。中心div的大小可以有一个固定的宽度，但最好不是......

问题是我不希望边divs留在中心div，因为我要做一个这些图像的“超过”动作有一点透明度。并且背景图像（森林）应该是可见的，所以divs这边不应该在中心div之后占据任何空间。

来源

2013-09-29 alexandre_fs

看看['display：flex']（http://css-tricks.com/snippets/css/a-guide-to-flexbox/） – avrahamcool

您可以使用CSS表格布局来实现这一点。

在这个演示中，第二个div占用了他需要的空间，第一个和第三个div占据了其余部分。

也可以通过使用display: flex来实现，但目前的CSS表格布局有一个更好的浏览器的支持（IE8 +）

Working Fiddle

HTML：

<div class="Row"> 
    <div class="Stretch">First</div> 
    <div class="Content">second will always occupy as much as he can</div> 
    <div class="Stretch">Third</div> 
</div>

CSS ：

.Row 
{ 
    width: 100%; 
    display: table; 
    border-spacing: 5px; 
} 

.Row > div 
{ 
    display: table-cell; 
    background-color: #e5b9b9; 
} 
.Content 
{ 
    white-space: nowrap; 
} 
.Stretch 
{ 
    width: 50%; 
}

在解决方案中，我在第二个div上使用nowarp, 所以如果您有很多文本需要分解为行，请将</br>标记。

来源

2013-09-29 19:42:55 avrahamcool

OK avrahamcool，你的解决方案看起来很不错。我将我的示例更新为您的代码。不过，我必须在中心DIV内的UL上应用一个固定的宽度，以在该DIV上具有适当的宽度。 “nowrap”物业的目的是什么？似乎没有任何影响...关于如何不强制宽度居中DIV元素的任何建议？ –

你可以在小提琴中发布HTML和CSS的那部分内容吗？玩起来会更容易，并找到你一个好的解决方案。 – avrahamcool

当然！感谢您的关注！请注意，如果移除了UL的宽度，单元格会丢失其格式... http://jsfiddle.net/eQwCn/13/ –

3格，并排排列，中间一个水平排列，其他占据剩余空间，不在中间格后面

回答

相关问题