Question

忍受我，我现在发一个愚蠢的问题。作为网络设计的业余爱好者，我并不完全理解CSS。具体来说，如何在水平面上排列对象。

现在，虚线＆lt;'p＆gt;'框位于空＆lt;'div＆gt;'下方框。我想把它们水平地放在一起。怎么去呢？

<html><head><style>
#div1
{width:400px; height:75px;border:4px solid;}
</style></head><body>

<div id="div1"></div>

<p style="border-style:dashed;border-width:2px;height:30px;width:396px;text-align:center;">Move me</p>

</body></html>

Answer 1

你还没有感觉到你还没有掌握CSS布局 - 在标准支持方面已经有很长一段时间了，所以今天大多数方法都使用稍微粗糙的方法来实现它，而且它并不总是不言自明他们是如何工作的或为什么。

默认情况下阻止垂直堆叠，因此您希望将流量更改为特定部分的水平运行。

正确的“现代CSS方式”将是使用flexbox，它特别是针对这些类型情况的布局工具（以及更多）。需要注意的是浏览器支持 - IE10及更高版本，但大多数浏览器都支持它。

要使用flexbox水平放置一些东西，您可以告诉父级成为水平方向的容器。在您的情况下，将两个元素包装在另一个元素中可能是个好主意：

<div class="wrapper">
    <div id="div1"></div>
    <p>Move me</p>
</div>

然后告诉包装器成为“flex容器”，其中默认模式是水平流动而不是垂直流动：

.wrapper {
  display: flex;
}

历史上有一些具有不同语法的实验性flexbox实现，所以这也是需要注意的事情（参见后面的示例）。下一步是调整框的大小，如果你希望它们的大小不是根据内容 - 这将是学习flexbox的下一步。 :-) 您需要知道的第一件事是，在这种情况下，他们仍会对width属性做出反应，否则会延伸到同样高的位置。

如果您想要更广泛的浏览器支持，您可以将flexbox与其他方法结合使用，这些方法不适合这个目的，但仍然可以工作 - 浮动或内联块会浮现在脑海中。 flexbox的优点在于它忽略了其子项的display模式和float属性。这意味着我们可以结合新旧技术。

Floats最初用于将图像或其他图形放置在文本块的右侧或左侧，但可用于创建具有一些工作的整个布局。他们有一些需要一段时间才能掌握的复杂行为。例如，由于浮动默认情况下浮动从其容器垂直伸出，您通常需要添加一些使包装器包含浮动的东西 - 最简单的方法可能是将overflow: hidden应用于包装器。
内联块基本上是允许文本流中的块级元素，但由于文本是水平流动的（至少是英文），您可以选择它们来创建完整的水平布局。缺点是HTML源代码中的任何空格（包括换行符）都会在水平项之间创建空格。

如果你去浮动路线，示例代码可能如下所示：

.wrapper {
  /* various flexbox syntaxes, old */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  /* modern flexbox syntax */
  display: flex;
  overflow: hidden; /* contain floats */
}

.wrapper p,
#div1 {
  float: left; /* will be ignored by modern browsers */
}

Answer 2

您可以设置display（内联或内嵌块）

内联元素不会在新行上启动，只会占用必要的宽度。

<强> CSS

#div1, p{
display: inline-block;
}

<强> DEMO HERE

Answer 3

您应该为他们设置display至inline-block。请检查此fiddle。

你也可以设置它们vertical-align: top（再看一下小提琴）并将它们对齐到顶部。

现在<p>略低于<div>。将margin的{{1}}设置为p以进行更改。

Answer 4

使用float：left作为第一个div

{宽度：400像素;向左飘浮;高度：75px;边框：4px实体;}

Answer 5

我个人这样做的方法是为这两个元素添加一个包装器，并使用text-align

以文本方式对齐它们

<div id="wrapper">
    <div id="div1"></div>

    <p style="border-style:dashed;border-width:2px;height:30px;width:396px;text-    align:center;">Move me</p>
</div>

然后为该包装器添加一些CSS：

#wrapper {
    text-align:center;
}

简单问题：CSS页面布局

5 个答案: