如何将div与其他div和其他div对齐

Question

我尝试了一些代码，但没有任何作用。  想用css做这个，谢谢=）

这个代码我试过，但不起作用。

#left{
float:left;
width:65%;
overflow:hidden;
}
#right{
overflow:hidden;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>

我不知道为什么这不起作用。

Answer 1

将float:left;添加到#right，然后就可以了。请注意，您还可以float:right;使用#right，然后#right将位于右侧。使用float: left;显示两个div彼此相邻，没有任何间隙。

供参考：https://developer.mozilla.org/en-US/docs/Web/CSS/float

Answer 2

这是我为您快速创建的 jsFiddle 。布局与您要求的布局相同，并且它也具有响应性。

HTML：

<div id="container">
    <div id="onetwo">
        <div id="one"></div>
        <div id="two"></div>
    </div>
    <div id="three"></div>
</div>

CSS：

#container {
    width: 100%;
    border: 3px solid blue;
    padding: 1% 1%;
    text-align: center;
}
#onetwo {
    display: block;
    width: 100%;
}
#one, #two {
    width: 49%;
    border: 3px solid red;
    height: 50px;
    display: inline-block;
}
#three {
    width: 100%;
    border: 3px solid red;
    height: 50px;
}
@media (max-width: 820px) {
    #one, #two {
        width: 46%;
    }
}
@media (max-width: 240px) {
    #one, #two {
        width: 40%;
    }
}

Answer 3

试试这个脚本，我在JSfiddle上写道：

http://jsfiddle.net/xb5vvpzn/1/

HTML

<div class="main">
    <div class="top">&nbsp;</div>
    <div class="bottom1">&nbsp;</div>
    <div class="bottom2">&nbsp;</div>
</div>

CSS

html, body {
    padding:0;
    margin:0;
}
.main {
    width:400px;
    border:1px solid #000;
    height:400px;
    padding:10px;
}

.main div {
    display:inline-block;    
}

.top {
    width:396px;
    border: 1px solid #cc0000;
    height:100px;
}

.bottom1, .bottom2 {
    margin-top:10px;
    border: 1px solid #cc0000;
    width:195px;
    height:100px;
}

Answer 4

没有花车的简单解决方案：

#main {
    width: 200px;                 /* adjust as needed */
    font-size: 0;
}
div div {
    display: inline-block;
    height: 60px;                 /* adjust as needed */
    width: 100%;
    box-shadow: inset 0 0 4px #000; /* cosmetics only */
    background: #eee;               /* cosmetics only */
}

div.h {
    width: 50%;
}

<div id="main">
    <div class="h"></div>
    <div class="h"></div>
    <div></div>
</div>

注意：使用font-size: 0容器div来避免标记中的实际空格 - 可以通过删除元素之间的空格来避免：<div>content here...</div><div>other one...</div>