简单的问题：CSS页面布局

忍受我，我现在会发表一个愚蠢的问题。作为网页设计的业余爱好者，我不完全理解CSS。具体来说，如何在水平面上安排物体。简单的问题：CSS页面布局

现在，虚线<'p>'框位于空的<'div>'框下方。我想把它们水平放在一起。如何去做呢？

<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>

来源

2015-10-17 HungryHippo

不要难过，你有没有掌握CSS布局，但 - 它已经很长一段时间在标准支持方面的到来，所以大多数方法目前使用稍微哈克方法acheive它并不总是不言而喻的，他们如何工作或为什么。

默认情况下，块垂直堆栈，所以你想改变流水平运行一个特定的部分。

适当的“现代CSS方式”将使用flexbox，这是特别针对这些类型的情况（和更多）的布局工具。警告是浏览器支持 - IE10及以上，但否则大多数每个浏览器都支持它。

要使用flexbox水平放置某些东西，您需要告诉父级成为水平定向的容器。在你的情况下，因此可能是一个好主意来包装两个元素在另一个元素：

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

你再告诉包装成为“柔性容器”，在默认模式是周转箱水平相当不是垂直：

.wrapper { 
    display: flex; 
}

有在历史上一直几个实验Flexbox的实现与不同的语法，所以这是一个需要注意的太（参见后面的示例）。下一步将是如何确定盒子的大小，如果您希望它们的大小不同于内容的大小 - 这将是学习flexbox的下一步。 :-) 你需要知道的第一件事是，在这种情况下，他们仍然会对width财产做出反应，否则就会变得同样高。

如果您想要更广泛的浏览器支持，您可以将flexbox与不适合此确切目的但仍然可行的其他方法结合使用 - 浮动或内联块会想到。关于flexbox的好处是，它忽略了其子项的display模式和float属性。这意味着我们可以结合新旧技术。

浮动最初旨在将图像或其他图形放置在文本块的右侧或左侧，例如，但可用于创建具有一定工作量的整个布局。他们有一些复杂的行为需要一段时间才能掌握。例如，由于默认情况下，浮动器会垂直伸出其容器，所以通常需要添加使包装器包含浮动器的内容 - 最简单的方法可能是将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 */ 
}

来源

2015-10-17 17:48:12 Emil

Tusen粘性埃米尔！ Du skriverpåettlättförståeligtsätt，until skillnadfrånmångaandra“tutorials”pånätet。 – HungryHippo

Det varsåliteså，@HungryHippo。 :-) Markeragärnasvaret som receterat om du ducker det besvarar dinfråga。 – Emil

可以设置display（串联，或内联块）

内嵌元素不启动一个新的行和只占用作为多宽度是必要的。

CSS

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

DEMO HERE

来源

2015-10-17 16:52:16

您应该设置display到inline-block他们。检查这个fiddle。

你也可以将它们设置为vertical-align: top（再看一次小提琴），它们将被排列在最前面。

现在<p>略低于<div>。设置margin为p到0进行更改。

来源

2015-10-17 16:52:27

使用float：留下第一格

{width：400px;向左飘浮;高度：960x75像素;边界：4PX固体;}

来源

2015-10-17 16:54:08 ookie

我个人做的方式是一个包装同时添加到这些元素，并用文本方式将它们对齐文本对齐

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

来源

2015-10-17 16:55:06

简单的问题：CSS页面布局

回答

相关问题