Question

我想将我的三个中间div元素放在旁边，中间div宽度最大，其他两个是固定大小

<div>
    <div style="width:50px; height; 50px;">Image</div>
    <div>Some Text</div>
    <div style="width:20px; height; 50px;">Image</div>
</div>

Answer 1

我有一种感觉你没有尝试谷歌搜索，但是，我感觉很好

对不起，这是一个工作http://jsfiddle.net/austinbv/YbCmH/

的jsfiddle

<div>
    <div id="first" >Image</div>
    <div id="second">Some Text</div>
    <div id="third" >Image</div>
</div>

<强> CSS

div > div {
    position: absolute;
    height: 50px;
}
#first {
    background: red;
    left: 0;
    width: 50px;
}
#second {
    background: blue;
    left: 50px;
    right: 50px;
}
#third {
    background: green;
    right: 0px;
    width: 50px;
}

Answer 2

有几种解决方案

http://matthewjamestaylor.com/blog/perfect-3-column.htm
http://www.alistapart.com/articles/holygrail/
其他人，只是google for 3 column csss

Answer 3

使用CSS定位，特别是绝对定位：绝对定位左侧和最右侧元素，并使用margin为它们预留空间。

这假设中间列总是比其他列高：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Align divs side by side with CSS</title>
    <style type="text/css">
        div { border:1px solid red; } /* just for demo purposes */
    </style>
</head>
<body>
    <div style="position: relative; top: 0px; left: 0px;">
        <div style="position:absolute; left:0px; top:0px; width:50px; height:50px;">Image</div>
        <div style="margin-left:50px;margin-right:20px;">Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br /></div>
        <div style="position:absolute; top:0px; right:0px; width:20px; height:50px;">Image</div>
    </div>
</body>
</html>

Answer 4

这可能有效:(但在ie7中没有正确）

<div style="height:300px;background:#ddd;border:1px solid red;float:left;text-align:center" id="container">
  <div style="height:175px;width:100px;background:#CF9;border:1px solid #C0C;float:right" class="box">Image</div>
  <div style="height:150px;width:auto;background:orange;border:1px solid #404040;float:right" class="box">Here is some text</div>
  <div style="height:300px;width:100px;background:green;border:1px solid yellow;float:left;text-align:center" class="box">Image</div>
</div>

Answer 5

你必须为每个具有高度和宽度属性的div使用float左键

Answer 6

这对我有用：

<html>
    <head>
        <style type="text/css">
            div {
                color: white;
                font-size: 14px;
                font-weight: 800;
            }

            div.end {
                width: 50px;
                height: 50px;
            }

            div.left {
                float: left;
                background: red;
            }

            div.right {
                float: right;
                background: blue;
            }

            div.container {
                background: green;
                height: 50px;
            }
        </style>
    </head>
    <body>

        <div class="container">
            <div class="end left">Image</div>
            Some Text
            <div class="end right">Image</div>
        </div>
    </body>
</html>

将div与CSS并排对齐

6 个答案: