Html 如何将一些div排成一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10170759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put some divs in a row?
提问by Dor Aharonson
I'm trying to put two divs without a linebreak between them.
我试图在它们之间没有换行符的情况下放置两个 div。
this is the html:
这是 html：
<div id="header">
<div id="logo"></div>
<div id="left">
<div id="slideshow"></div>
</div>
</div>
and this is the CSS:
这是 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;
}
the problem is that I want it to look like this: How I want it to look like
问题是我希望它看起来像这样： 我希望它看起来像
But it looks like this: How it looks like
但它看起来像这样： 它看起来像
回答by T.J. Crowder
This is controlled by the displaystyle property. Normally, divelements use display: block. You can use display: inlineor display: inline-blockinstead if you want them on the same horizontal line.
这是由displaystyle 属性控制的。通常，div元素使用display: block. 如果您希望它们在同一水平线上，您可以使用display: inline或display: inline-block代替。
Example using inline-block(live copy| source):
CSS:
CSS：
.ib {
display: inline-block;
border: 1px solid #ccc;
}
HTML:
HTML：
<div class="ib">Div #1</div>
<div class="ib">Div #2</div>
回答by Mrigesh Raj Shrestha
Introduce a floatCSS property. Change CSS as below, for #logoand #left.
引入一个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;
}
From the MDN Documentation,
从MDN 文档，
The floatCSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
所述浮子CSS属性指定的元素应该从正常流动采取并沿着左侧或右侧其容器，其中文本和内联元素将环绕它放置。
回答by Priyank Patel
Div elements normally use display:blockwhich forces a line break before and after the element.If you want to remove the line breaks , you can use display:inlinewhich will display elements horizontally.Make the div's display property to display:inlineor display:inline-blockyou want to appear horizontally .
Div 元素通常使用display:blockwhich 强制元素前后换行。如果要删除换行符，可以使用display:inlinewhich 将元素水平显示。使 div 的 display 属性为display:inlineordisplay:inline-block你想要水平显示。
回答by Kappei
Try this way:
试试这个方法：
#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;
}?
Basically I put a float:right;on the logo to position it right, then added position:relativeto the #leftdiv and position:absoluteto the #slideshowdiv. This way you can adjust the topand leftattributes to position the slideshow anywhere you want it.
基本上，我把float:right;上的标识来定位是正确的，然后添加position:relative到#left股利和position:absolute到#slideshowDIV。通过这种方式，您可以调整top和left属性以将幻灯片放置在您想要的任何位置。
回答by Baz1nga
display:inlineis the css style that you need to use.
display:inline是您需要使用的 css 样式。
