将两个自动调整div之间的固定宽度div对齐

How can I display a div of fixed width 800px and on the both sides (left and right) there should be auto adjusting divs. Till now I have tried using float:left on the left auto adjusting div , widht:800px on the center div and float:right on the auto adjusting right div , but it is not working.

如何显示固定宽度为800px的div,并且在两侧(左侧和右侧)应该有自动调整div。直到现在我已经尝试使用float:左边的自动调整div,widht:中心div上的800px和浮动:右边的自动调整右边div,但它不起作用。

This is what i am getting till now. Note: the background of center div is black, all three divs are enclosed in container div which has background color of red. 将两个自动调整div之间的固定宽度div对齐

这就是我到现在为止所得到的。注意:中心div的背景为黑色,所有三个div都包含在容器div中,背景颜色为红色。

HTML Code

<body>
        <div id="outerSideContainerLeft" style:"float:left">
        left

        </div>

        <div id="feedContainer">
        center
        </div>

        <div id="outerSideContainerRight" style:"float:right">
        right               
        </div>

</body>

CSS Code

div{
    display:inline-block;
}
#feedContainer{
    margin:0px;
    width:800px;
    background-color: black;
}

#outerSideContainerLeft
{
 background-color: blue;
 width: calc(49%-400px);
}

#outerSideContainerRight
{
 background-color: green;
 width: calc(49%-400px);
}

2 个解决方案

#1

Try this

this is just using inline-block for the display and using the calc property for the width of the left/right boxes.

这只是使用内联块显示,并使用calc属性作为左/右框的宽度。

Keep in mind the left/right boxes will go under each other once the screen is too narrow. you can use media queries to change the layout so its responsive like this

请记住,一旦屏幕太窄,左/右框就会相互碰撞。您可以使用媒体查询来更改布局,以便它像这样响应

The calc property basically calculates a value for you. The example I gave, you had a middle div with width 200px. So the right/left boxes need to be 50% of the entire width of window MINUS half the size of the middle box.

calc属性基本上为您计算一个值。我给出的例子,你有一个宽度为200px的中间div。因此,右/左框需要占窗口整个宽度的50%MINUS的一半大小。

so 50% of the window minus 100px, this will give them relatively the right amount of width so they fill in the line around the fixed width middle div.

所以窗口的50%减去100px,这将给予它们相对适当的宽度,因此它们填充固定宽度中间div周围的线。

Except, theres a weird margin when using inline-block, so I use 49% instead, to account for the margin.

除了,使用内联块时有一个奇怪的余量,所以我使用49%来代替保证金。

#2

You could try the new CSS3 flexbox.

你可以试试新的CSS3 flexbox。

Check out this fiddle, and if it is what you're looking for, then I can elaborate.

看看这个小提琴,如果它是你正在寻找的,那么我可以详细说明。

Basically, your container needs this style:

基本上,您的容器需要这种风格:

display: flex;

Your left and right elements need these styles:

您的左右元素需要以下样式:

flex-grow:   1;
flex-shrink: 1;

And your middle element needs these styles:

你的中间元素需要这些风格:

flex-grow:   0;
flex-shrink: 0;

So, for HTML that looks like this:

因此,对于看起来像这样的HTML:

<div class="container">
    <div class="left">We keep content here. Blah blah blah blah blah. Also, blah blah blah.</div>
    <div class="mid">This is a fixed size.</div>
    <div class="right">Some other content goes here.</div>

You would use CSS like this (see fiddle):

你会像这样使用CSS(见小提琴):

.container {
    color: white;
    background-color: red;
    padding: 1em 0;

    display: flex;
}
.left {
    background-color: blue;
    flex-shrink: 1;
    flex-grow:   1;
}
.mid {
    width: 600px;
    background-color: black;
    flex-shrink: 0;
    flex-grow:   0;
}
.right {
    background-color: green;
    flex-shrink: 1;
    flex-grow:   1;
}

Also see this guide for more information about flexbox. As a warning, it is not supported at all by older browsers.

有关flexbox的更多信息,另请参阅本指南。作为警告,旧浏览器根本不支持它。

#1