Question

如何删除“热门内容”和“剩余内容”中的额外空格？

我希望左和右达到同一水平。

我不想失去所有这些街区的相同保证金。

静态图片

Example image

HTML

<div class="top">Top content</div>
<div class="left">Left content</div>
<div class="right">Right content</div>

CSS

.top
{
    margin: 3%;
    background: red;
}

.left
{
    margin: 3%;
    float: left;
    width: 50%;
    background: yellow;
}

.right
{
    margin: 3%;
    overflow: hidden;
    background: green;
}

现场演示

http://jsfiddle.net/yF6MX/20/

最佳解决方案

http://jsfiddle.net/yF6MX/14/

如果我们可以使用与Top内容相同的保证金，那么这个解决方案将是完美的。

Answer 1

这似乎是你想要的：

.top
{
    border: 1px solid #ccc;
    background: red;
    margin-left:10px;
    margin-right:10px;

}

.left
{
    float: left;
    width: 50%;
    background: yellow;
    margin: 10px;
}

.right
{  
    background: green;
    margin: 10px;
    overflow: hidden;
}

你做的很棒，但是在.top中你有“margin：10px”，你在左边的区块上添加了一个边距，只做左右边距

Answer 2

您可以尝试从左右元素中删除margin-top。

margin: 0 10px 10px 10px;

http://jsfiddle.net/yF6MX/5/

Answer 3

使用此

更新 http://jsfiddle.net/yF6MX/15/

    .top
{
    border: 1px solid #ccc;
    background: red;
    margin: 10px;
    margin-bottom: 0px;
}

.left
{
    float: left;
    width: 47%;
    background: yellow;
    margin: 2%;
}

.right
{  
    background: green;
    margin: 2% 2% 2% 0;
    overflow: hidden;
    float: right;
    width: 47%;
}

Answer 4

我个人会在其周围添加container padding：

<div class="container">
    <div class="top">Top content</div>
    <div class="left">Left content</div>
    <div class="right">Right content</div>
</div>

然后删除其他margin媒体资源，并在margin-bottom和.top margin-right上加.left，并添加新的.container CSS：

.container {
    padding: 10px;
}

.top {
    border: 1px solid #ccc;
    background: red;
    margin-bottom: 10px;
}

.left {
    float: left;
    width: 50%;
    background: #FF0;
    margin-right: 10px;
}

.right {
    background: green;
    overflow: hidden;
}

<强> DEMO

希望这有帮助。

如何一起使用浮动和保证金？

4 个答案: