Html 并排放置 2 个文本块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10751753/
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
Having 2 blocks of text side by side
提问by Bronzato
I try to have 2 blocks of text side by side. Can you help me?
我尝试并排放置 2 个文本块。你能帮助我吗？
Something like this:
像这样的东西：
If the page is resized, I would like the 2 blocks to be centered. I was not able to have my blocks side by side.
如果调整页面大小，我希望 2 个块居中。我无法并排放置积木。
I create a jsFiddle here as a starting point: http://jsfiddle.net/LpJBm/2/
我在这里创建了一个 jsFiddle 作为起点：http: //jsfiddle.net/LpJBm/2/
Thanks.
谢谢。
回答by chaenu
Float the div and wrap them to be centered: http://jsfiddle.net/Xj5Wy/
浮动 div 并将它们包裹起来居中：http: //jsfiddle.net/Xj5Wy/
回答by Eric
Just float the gray box right:
只需将灰色框向右浮动：
#block2 {
background-color: #F5F5F5;
margin: 10px 20px;
padding: 20px;
width: 180px;
float: right;
}
And swap the order of the HTML:
并交换 HTML 的顺序：
<div id="block2">
Nos bureaux sont ouverts du lundi au vendredi de 9h00 à 17h00
</div>
<div id="block1">
Merci d'avtheitroad utilisé notre plateforme...
</div>
?http://jsfiddle.net/Eric/LpJBm/8/
? http://jsfiddle.net/Eric/LpJBm/8/
Centering the boxes is a separate problem. To center anything horizontally, wrap it in a div, and apply
将盒子居中是一个单独的问题。要将任何内容水平居中，请将其包裹在 div 中，然后应用
.wrapper {
margin: auto;
width: 400px; /*The width you want it to be when centered*/
/* min-width works too */
}
In your case, you also need overflow: hidden, in order to force your wrapper to contain the floats.
在您的情况下，您还需要overflow: hidden, 以强制您的包装器包含浮点数。
回答by Th0rndike
There it is. just add:
就是这样。只需添加：
float:left;
to both divs.
到两个div。
回答by PFK
try
尝试
#block1
{
margin: 10px 20px;
padding: 20px;
width: 400px;
float: left;
}
#block2
{
background-color: #F5F5F5;
margin: 10px 20px;
padding: 20px;
width: 180px;
margin-left:400px;
}
回答by Karthi Shan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#block2
{
background-color: #F5F5F5;
margin: 10px 20px;
padding: 20px;
width: 180px;
}
</style>
</head>
<body>
<div id="block1" style="float:left;">
Merci d'avtheitroad utilisé notre plateforme...
</div>
<div id="block2" style="float:right;">
Nos bureaux sont ouverts du lundi au vendredi de 9h00 à 17h00
</div>
</body>
</html>
try like this.........u get answer
像这样尝试.......你得到答案
