3 DIV在一行

时间：2014-01-18 12:13:30

标签： html css

我需要在一行中放置三个<div>元素。

示例：

<div class="row">

    <div class="left">
         <!-- width 100% , float:left  -->
    </div>

    <div class="center">
         <!-- width 960px , margin:0 auto  -->

         <div class="sidebar">
              <!-- width 350px , float:right  -->
         </div>

    </div>

    <div class="right">
         <!-- width 100% , float:right  -->
    </div>

</div>

示例图片： enter image description here

我想为div.right div.sidebar设置相同的背景。

5 个答案:

答案 0 :(得分：1)

css文件

 .main{ background-color: #ddd;}
.left {

    display: table-cell;
}
.middle {

    display: table-cell;
    width:100%;
}
.right {

    display: table-cell;
}

html代码

<div class="main">
<div class="left"> Some content </div>
<div class="middle"> This should fill the space left </div>
<div class="right"> Some other content </div>
</div>

答案 1 :(得分：0)

在显示div时使用内联样式：

style="display:inline"

<div class="row">

<div style="display:inline" class="left">
     <!-- width 100% , float:left  -->
</div>

<div style="display:inline" class="center">
     <!-- width 960px , margin:0 auto  -->

     <div style="display:inline" `class="sidebar">
          <!-- width 350px , float:right  -->
     </div>

  </div>

  <div class="right">
     <!-- width 100% , float:right  -->
  </div>

  </div>

答案 2 :(得分：0)

解决方案1 ​​ - CSS Calc

<强> JSFiddle 即可。此解决方案使用calc() CSS3函数。 This is supported by all major browsers, notably going back to IE9

<强> HTML 

<div id="container" class="cf">
    <div id="left" class="side"></div>
    <div id="center"></div>
    <div id="right" class="side"></div>
</div>

<强> CSS 

#container div {
    height:300px;
    float:left;
}
#center {
    width:960px;
    background:#FFFF00;
}
.side {
    width:calc(50% - 480px);
    background:#FF0000;
}

（注意：因为此解决方案需要花车我还包括micro clearfix hack）

解决方案2 - Flexbox

<强> JSFiddle 即可。此技术使用CSS3 flexbox模型。除了浏览器兼容性，这是我最喜欢的方法，但是this isn't a good solution if you want to target legacy browsers。

<强> HTML 

<div id="wrapper">
    <div id="left" class="flex"></div>
    <div id="center"></div>
    <div id="right" class="flex"></div>
</div>

<强> CSS 

#wrapper {
    display:flex;
}
#wrapper div {
    height:300px;
}
.flex {
    flex:1;
}
#center {
    width:960px;
}

答案 3 :(得分：0)

我基本上是为你做的。 JSFiddle 

            <html>
            <head>
            <style>

            #row{
            background: grey;
            width: 100%;
            margin: 0;
            float: left;
            }
            #left {
            background: #ccc;
            width: 60%;
            float: left;
            }
            #right{
            background: #999;
            width: 40%;
            float: right;

            }

            #content-left{
                width: 70%;
                float: right;
            }
            #right-top-wrapper{
            width: 100%;
            background: #666;
                color: #f3f3f3;
                float: left;
            }
            #right-top{
                width: 40%;

                clear: both;

            }
            #right-bottom{
                width: 40%;
                float: left;
                clear: both;
            }


            </style>
            </head>
            <body>
            <div id="row">
            <div id="left">
                <div id="content-left">
                <h3>Lorem Ipsum</h3>
                    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboru
                </div>
            </div>
            <div id="right">
                <div id="right-top-wrapper">
                    <div id="right-top">
                    <h3>Lorem Ipsum</h3>
                    "Lorem ipsum dolor sit amet, co
                </div>
                </div>
                <div id="right-bottom">

                <h3>Lorem Ipsum</h3>
                    "Lorem ipsum dolor sit amet, co
                </div>
            </div>
            </div>
            </body>
            <html>

答案 4 :(得分：0)

这里你去一行3 DIV 单击“运行代码段”以查看结果

＆＃13;
＆＃13; 
<div id="d3" style="display:inline-block; width:100px;">content1</div>
<div id="d3" style="display:inline-block; width:100px;">content2</div>
<div id="d3" style="display:inline-block; width:100px;">content3</div>
＆＃13;
＆＃13;
＆＃13; 

<div id="d1" style="display:inline-block; width:100px;">**content1**</div>
<div id="d1" style="display:inline-block; width:100px;">**content1**</div>
<div id="d3" style="display:inline-block; width:100px;">**content3**</div>
相关问题
最新问题