Question

我发现有太多关于此主题的参考文献已经回答，但我没有找到一个令人满意的答案。

关注案例：

enter image description here

我创造了一个预期行为的极简主义小提琴：

enter image description here

如果a有3个cels，我希望只在每个div之间使用spacer。这只能使用CSS吗？

[HTML]

<div class="cel-1-2">
   Max Size of Objects in Cache (Shared Memory)
    <div class="cel-1-2">
        <input type="text" placeholder="foo" />
    </div>
    <div class="cel-1-2">
        <select>
            <option value="foo">bar</option>
        </select>
    </div>
</div>
<div class="cel-1-2">
    foobar
</div>

[CSS]

[class*=cel-] {
   padding-right:10px;
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box;     
   box-sizing: border-box;
    background: blue;
}

.cel-1-2 {
    width: 50%;
    float: left;
}

input, select {
    width: 100%;
    float: left;
}

更清楚：

这就是我想要的

enter image description here

==＆gt;不是这个！

enter image description here

Answer 1

我不知道这里有什么问题。 可以使用CSS轻松完成：

.parent {
   width: 100%;
   background: green;
    padding: 1em 0; 
    height: 500px;
}
.child {
    width: 30%;
    height: 200px;
    background: yellow;
    float: left;
}
.child + .child {
    margin-left: 5% /* 1 000 000 $ TIP */
}

现场演示：http://jsfiddle.net/hDqbk/

Answer 2

我认为你可以为所有孩子设置一个保证金，然后重置第一个 http://jsfiddle.net/r66BG/3/

.child {    
    float: left;
    margin-left: 20px;
}

.child:first-child {
    margin-left: 0px;
}

Answer 3

我是网页设计的新手，但如果我的问题没有出错，我可以推荐一下： 1）使用bootstrap将这些div放在同一行，bootstrap将自动创建间距。

2）使用我不推荐的保证金属性手动移动div

P.S。：我打算发表评论，要求澄清一点，但我还没有足够的代表。如果这是不相关的，请忽略，我会尝试提出相关的答案

Answer 4

我强烈建议您使用twitter bootstrap来构建您的网站。它很简单，很强大，反应灵敏。我尝试将它用于你的代码：

<html>
    <head>
        <title>Student Program Management</title>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <p>Max Size of Objects in Cache (Shared Memory)</p>
                <div class="col-md-4 ">
                    <input type="text" placeholder="foo" />
                </div>
                <div class="col-md-4">
                    <select>
                        <option value="foo">bar</option>
                    </select>
                </div>
                <div class="col-md-4">
                    foobar
                </div>
            </div>
        </div>
    </body>
</html>

但是，是的，还有其他方法可以使用简单的css，但在许多情况下，这种方法比使用它更痛苦。 Bootstrap基于网格布局系统，您的网站根据需要决定（div元素中的属性class =“row”）行。然后在一行内，你可以放置列（div与attribudte class =“col-md-4” - 例如）。一行有12列，所以在我的情况下，一列中有3行，所以每个div都有class =“col-md-4”因为12/3 = 4。每个div现在都有相同的宽度。我不确定，如果这正是你想要的，但是对于像bootstrap这样的框架比使用简单的CSS更有效，所以我只能建议你在可能的情况下删除普通的CSS。您可以在此处找到更多信息：http://getbootstrap.com/css/#grid

Answer 5

给中间div一个新类，并为该类提供正确的属性。

例如：

.TheFloatingDiv{
    margin-left: 10px;
    margin-right: 10px;
}

希望这是你问题的答案，因为我完全不了解它。

CSS div元素之间的差距

这就是我想要的

==＆gt;不是这个！

5 个答案: