如何将一些div放在同一行？

Question

如何将一些div放在同一行？

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

问题在于我想让它看起来像这样：我想要的外观但它看起来像这样：实际外观

- Dor Aharonson

你能告诉我们你想要哪两个div，但不要换行吗？ - Priyank Patel

"left" 和 "logo"。("slideshow" 在 "left" 中) - Dor Aharonson

5个回答

5

引入一个CSS属性float。将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文档，

浮动（float）是一个CSS属性，它指定元素应该被从正常流中移除，并放置在其容器的左侧或右侧，在那里文本和内联元素将围绕它。

- Mrigesh Raj Shrestha

2

Div元素通常使用display:block，这会在元素前后强制换行。如果您想删除换行符，则可以使用display:inline，它将水平显示元素。将div的display属性设置为display:inline或display:inline-block，即可使其水平显示。

- Priyank Patel

当我使用display: inline;时，除了div“header”之外，所有div都会消失。当我使用display: inline-block;时，它看起来就像现在一样... - Dor Aharonson

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

基本上我在logo上放了一个float:right;来将其定位到右侧，然后给#left div添加了position:relative和#slideshow div添加了position:absolute。这样你就可以调整top和left属性来将幻灯片展示在任何位置。

- Kappei

0

display:inline 是你需要使用的 CSS 样式。

- Baz1nga

当我使用display: inline;时，除了div“header”之外，所有的div都消失了... 当我使用display: inlie-block;时，它看起来就像现在这样... - Dor Aharonson

那是因为您设置了不自然的宽度和高度...请修复。 - Baz1nga

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

这是由display样式属性控制的。通常，div元素使用display: block。如果您希望它们在同一水平线上，则可以改用display:inline或display:inline-block。

使用inline-block的示例（演示页面 | 源代码）：

CSS：

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

HTML：

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