3

我试图在它们之间放置两个没有换行符的 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;
}

问题是我希望它看起来像这样： 我希望它看起来如何

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

4

5 回答 5

10

这由display样式属性控制。通常，div元素使用display: block. 如果您希望它们位于同一水平线上，您可以使用display: inlineor代替。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>
于 2012-04-16T08:25:46.907 回答
5

引入一个floatCSS 属性。更改 CSS 如下，for#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 文档中，

float CSS 属性指定一个元素应该从正常流中取出并放置在其容器的左侧或右侧，文本和内联元素将环绕它。

于 2012-04-16T08:38:30.143 回答
2

div元素通常使用display:blockwhich强制在元素前后换行。如果要删除换行符，可以使用display:inlinewhich将水平显示元素。将div的display属性设置为display:inline或display:inline-block你想水平显示。

于 2012-04-16T08:29:49.603 回答
1

试试这个方法：

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

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

#slideshow {
    position:absolute;
    top:20px;
    left:20px;
    background-color: #137387;
    width: 686px;
    height: 144px;
    margin-right: auto;
    margin-left: auto;
}​

基本上我float:right;在徽标上放了一个以使其正确定位，然后添加position:relative到#leftdiv 和divposition:absolute中#slideshow。这样，您可以调整top和left属性以将幻灯片放置在您想要的任何位置。

于 2012-04-16T08:45:12.823 回答
0

display:inline是您需要使用的 css 样式。

于 2012-04-16T08:23:03.910 回答