0

这是我不明白的事情。首先我的代码和jsfiddle：

HTML：

<div id="appWrapper">
  <div id="app_logo">

  </div>
  <div id="app_text1">

  </div>
</div>

CSS：

div#appWrapper {
    padding: 1em;
    width: 80%;
    height: 85%;
    margin: auto;
    background-color: white;
}

div#app_logo {
    margin: 1em;
    height: 20em;
    width: 20em;
    background-color: #FFD300;
}

div#app_text1 {
    margin: 1em;
    height: 20em;
    width: 25em;
    background-color: #7109AA;
}

http://jsfiddle.net/JfMb2/embedded/result/

问题：

为什么元素 app_text1 位于 app_logo 元素下方而不是它的右侧？

我必须更改什么才能使其位于其右侧？

4

3 回答 3

3

为什么元素 app_text1 位于 app_logo 元素下方而不是其右侧？

因为默认情况下， div 元素是块级的，并且占据了它们父元素的整个宽度。

我必须更改什么才能使其位于其右侧？

向左浮动。

div#app_logo {
    margin: 1em;
    height: 20em;
    width: 20em;
    background-color: #FFD300;
    float:left;
}

jsFiddle 示例

于 2013-10-29T21:00:08.350 回答
2

有不同种类的显示器：inline和block。默认情况下，块元素总是一个在另一个下显示，而内联元素在一行（doh）中一起显示。

排队：

CSS代码：

display: inline;

<span>和的默认值<a>

堵塞

CSS代码：

display: block;

更多 html 标签的默认设置，例如<div>, <img>, <li>, <h1>,<p>

于 2013-10-29T21:03:30.320 回答
0

就像其他人已经说过的那样。Div 是块元素，默认情况下，其宽度为其父元素的 100%。内联元素，将显示内联并随内容调整宽度。在您的情况下，内联块应该是完美的，内联和块的混合。像 div 一样进行样式设置和水平对齐。Inline-block 元素不会破坏页面的浮动，因此不需要clear:both它们。

查看您的jsfiddle最新使用display:inline-block;

于 2013-10-29T21:10:07.280 回答