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

问题是我希望它看起来像这样： How I want it to look like

但它看起来像这样： How it looks like

Answer 1

这由display样式属性控制。通常，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

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

Answer 3

介绍float CSS属性。为#logo和#left更改CSS，如下所示。

#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 Documentation，

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

Answer 4

尝试这种方式：

#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添加到#left div，将position:absolute添加到#slideshow div。这样，您可以调整top和left属性，将幻灯片放置在您想要的任何位置。

Answer 5

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

如何连续放一些div？

5 个答案: