如何连续放一些div？

Question

我试图把两个没有换行符的div放在它们之间.

这是html:

        <div id="header">
            <div id="logo"></div>

            <div id="left">
                <div id="slideshow"></div>
            </div>

        </div>

这是CSS:

    #header {
    background-color: #13768a;
    width: 962px;
    height: 207px;
    margin-right: auto;
    margin-left: auto;
    clear: both;
}


#logo {
    background-image:url('logo.png');
    height: 207px;
    width: 250px;
    margin-right: 0px;
    padding: 0px;
    }

    #left {
    width:712px;
    height: 207px;
}

#slideshow {
    background-color: #137387;
    width: 686px;
    height: 144px;
    margin-right: auto;
    margin-left: auto;
}

问题是我希望它看起来像这样: 我希望它看起来像

但它看起来像这样: 它看起来如何

Answer 1

这由displaystyle属性控制.通常,div元素使用display: block.如果您希望它们位于同一水平线上,您可以使用display: inline或display: inline-block代替它.

使用示例inline-block(live copy | source):

CSS:

.ib {
  display: inline-block;
  border: 1px solid #ccc;
}

HTML:

<div class="ib">Div #1</div>
<div class="ib">Div #2</div>

Answer 2

引入一个floatCSS 属性。更改 CSS 如下，对于#logo和#left。

#logo {
  background-image:url('logo.png');
  height: 207px;
  width: 250px;
  margin-right: 0px;
  padding: 0px;
  float:right;
}

#left {
  width:712px;
  height: 207px;
  float:left;
}

从MDN 文档，

所述浮子CSS属性指定的元素应该从正常流动采取并沿着左侧或右侧其容器，其中文本和内联元素将环绕它放置。