如何正确对齐CSS中的两个元素

Question

需要一些帮助（可能有些基本）CSS。我需要与不同的元素对齐，一个接一个。如果你看看......

...你可以看到我目前的代码产生了什么。这显然不是我想要的......他们目前被切断了，他们看起来并不好看......

当前代码：

#bullets {
display: inline-block;
width: 60%;
float: left;
}

#quotes {
display: inline-block;
width: 40%;
float: right;
}

Answer 1

我想你想要这个：http://jsfiddle.net/NicoO/jhgcm6ym/

HTML：

<div id="bullets">Left</div>
<div id="quotes">Right</div>

CSS

#bullets {
    width: 60%;
    float: left;
}
#quotes {
    margin-left: 60%;
}

display: inline-block;和float不能一起播放，因为默认情况下浮动元素将成为框块元素：http://www.w3.org/TR/CSS21/visuren.html#float-position

这是一个非常好的信息，您应该阅读：http://learnlayout.com/

Answer 2

相反，您可能还想考虑离开#quotes：

 #quotes {
      display: inline-block;
      width: 40%;
      float: left;
 }

从这里你可以通过调整子弹中的边距来清理：

 #bullets {
      margin: auto 2%;
      display: inline-block;
      width: 55%;
      float: left;
 }

希望这有帮助！

您可以从中获取信息的好地方是查看其他网格系统是如何组合在一起的。请考虑以下代码段：

 .container {
      position: relative;
      width: 98%; /* width of container */
      margin: 0 auto;
      padding: 0;
 }

 .container .column,
 .container .columns {
      display: inline;
      float: left;
      margin-left: 1%; /* spacing between columns */
      margin-right: 1%; /* spacing between columns */
 }

 .container .one.column,
 .container .one.columns { width: 4.25%; }
 .container .two.columns { width: 10.5%; }
 /* and so on... however many columns you want */

.container:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

注意所有内容是如何浮动到left并且显示设置为inline。我们通过添加左右边距在.columns之间创建了一点点分隔。这将在我们.columns之间创造大量空间，因此我们不会遇到您遇到的问题。此外，this可能是一个很好的资源，可以了解有关网格及其设置方式的更多信息。

Answer 3

我想我有一个解决你问题的方法..

.container-block{
    padding:20px;
}

.container-block 是项目符号和引号

的父类