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

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

…您可以看到我当前的代码产生了什么。这显然不是我想要的。。。他们现在两边都被剪掉了，而且他们在一起看起来不太好

当前代码：

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

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

---

而不是您想考虑浮动<代码>引用> <代码>左：

 #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;
}

请注意，所有内容都浮动到

左侧

，并且显示设置为

内联

。我们通过添加左右边距，在

.columns

之间创建了一点分隔。这将在我们的

.columns

之间创建一个很大的空间，这样我们就不会像您所经历的那样遇到问题。此外，这可能是一个很好的资源，可以了解更多有关网格及其设置的信息。

我想您需要以下信息：

HTML:

显示：内联块

和

float

不能一起播放，因为默认情况下，浮动元素将成为一个方框元素：

---

这是一个非常好的信息，您应该阅读：

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

.container-block{
    padding:20px;
}

---

.container block是项目符号和引号的父类

您的链接显示“错误404:未找到文件”！哎呀。链接是固定的。很抱歉也许你需要重置css？糟糕的是，我忘了更新

宽度
。现在检查一下。另外，可能有边界问题。我看到一个橙色边框，因为我看不到其他CSS或HTML，所以很难说为什么它会被切断<代码>框大小：边框框
可能会有所帮助。
#bullets {
    width: 60%;
    float: left;
}
#quotes {
    margin-left: 60%;
}

.container-block{
    padding:20px;
}