Html CSS中的水平块对齐

我正在学习忍受自己

我希望在一个容器中有3个独立的块，例如，通过css将它们内联

html（粗略的想法）

---

发生在我身上的是，它们只是在彼此下方垂直排列。在水平线上彼此不相邻。我已经尝试了很多方法，最近的一次尝试是用bootstrap创建一个网格系统，但后来我遇到了一些问题，所以我想我应该尝试一种新的方法

您需要清理HTML、CSS并使用简单的解决方案。全屏查看结果。使用

Display:inline block

.content容器
{
宽度：1500px；
保证金：40px自动0自动；
填充：10px；
}
.街区{
显示：内联块；
}

没有浮动：居中。你的HTML和CSS语法都完全错误。我的标记更好吗？对不起，我没想就写得很快。我道歉！非常感谢。这太完美了！，但与此同时。每个块将具有不同的内容，但大小相同。使用带有“.block”的css解决方案时，我必须单独设置每个块的样式？或者我可以通过执行相同的显示来作为一个整体来完成它：与“content container”类内联？您可以拥有不同的内容，因为HTML定义了内容而不是CSS，但是如果您想单独设置样式，您可以使用ID（#）或CSS伪选择器，如

：nth child

：nth of type

。在使用此解决方案时，我注意到的一件事是，当浏览器大小改变时，它不会缩放并整齐对齐。有什么建议吗？我回答了你的问题。在改变内容的情况下实现它会有缺点。您需要使用媒体查询进行浏览器大小调整边界检查。最好使用像Bootstrap这样的前端框架。

<div class="content-container">
    <div class="block1">
        <img scr="blockimage1" />
    </div>

    <div class="block2">
        <img scr="blockimage2" />
    </div>

    <div class="block3">
        <img scr="blockimage3" />
    </div>
</div>

.content-containter
{
  width:1500px;
  margin:40px auto 0 auto;
  padding:10px;
}

.block1
{
  width:500px;
  float:left;
}

.block2
{
  width:500px;
  float:center;
}

.block3
{
  width:500px;
  float:right;
}