Html 如何并排放置两个段落（彼此相邻）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30526498/
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 place two paragraphs side by side (next to each other)?
提问by Esha
I have two div containers wrapped by a parent div. Each child div contains paragraph with header. If I try to align thsese two paragraphs (including header) next to each other in the same row, they don't stay. They just break down and sit one underneath other. How do I keep them next to each other , and also the same margin from the top?
我有两个由父 div 包裹的 div 容器。每个子 div 包含带有标题的段落。如果我尝试将这两个段落（包括标题）在同一行中彼此相邻对齐，则它们不会留下来。他们只是崩溃并坐在另一个下面。 我如何让它们彼此相邻，并且从顶部保持相同的边距？
NB I always want to keep the same amount of text as it shows in the demo in my first paragraph.
注意，我总是希望保留与第一段演示中显示的文本数量相同的文本。
HTML:
HTML：
<div id="gallery-text">
<div id="gallery-text-left" style="float:left">
<p id="gallery-text-quote-left" style="font-family:Century Gothic; color:#006600"><b>I am not interested in shooting new things, I am interested to see things new.</b></p>
<p id="gallery-paragraph-1" style="font-family:Georgia">
bodybodybodybodybodybodybodybodybodybodybodybodybodybody
bodybodybodybodybodybodybodybodybodybodybodybodybodybody
bodybodybodybodybodybodybodybodybodybodybodybodybodybody
</p>
</div>
<div id="gallery-text-right" style="float:left">
<p id="gallery-text-quote-right" style="font-family:Century Gothic; color:#006600"><b>External photo albums</b></p>
<p id="gallery-paragraph-2" style="font-family:Georgia">
<a>Link coming soon</a>
</p>
</div>
</div>
.CSS:
.CSS：
#gallery-text-left{
}
#gallery-paragraph-1{
border-left:8px solid #3CB371;
border-radius:4px;
padding-left:15px;
}
#gallery-paragraph-2{
border-left:8px solid #3CB371;
border-radius:4px;
padding-left:15px;
}
#gallery-text-right{
}
Please have a look on my Demo.
请看一下我的演示。
回答by George
This will work but when the window width is below a certain point the text will go underneath the other text
这会起作用，但是当窗口宽度低于某个点时，文本将位于其他文本下方
#gallery-text-left{
float:left;
width:50%
}
I would consider using something like Bootstrap instead of writing everything yourself
我会考虑使用 Bootstrap 之类的东西，而不是自己编写所有内容
回答by VladNeacsu
You we're missing the width property for your floating divs. I updated your fiddle.
我们缺少浮动 div 的宽度属性。我更新了你的小提琴。
#gallery-text-left{
/* Added */
width: 50%;
}
#gallery-paragraph-1{
border-left:8px solid #3CB371;
border-radius:4px;
padding-left:15px;
/* Added */
word-wrap: break-word;
}
#gallery-paragraph-2{
border-left:8px solid #3CB371;
border-radius:4px;
padding-left:15px;
}
#gallery-text-right{
/* Added */
width: 50%;
}
http://jsfiddle.net/v48tbqxx/1/
http://jsfiddle.net/v48tbqxx/1/
I also added word-wrap so the text breaks in the paragraphs
我还添加了自动换行，因此段落中的文本会中断
回答by Mr_Green
You seems to be looking for display: table-cellinstead of float: left
你似乎在寻找display: table-cell而不是float: left
Try this:
尝试这个：
#gallery-text > div{
display: table-cell;
}
And also avoid using inline styles.
并且还要避免使用内联样式。
回答by gopalraju
Remove the inline float:left and add this:
删除内联 float:left 并添加以下内容：
#gallery-text{
display:table;
}
#gallery-text-left, #gallery-text-right{
display:table-row;
}
#gallery-text-left > p,
#gallery-text-right > p{
display:table-cell;
}
回答by stanze
回答by Karthi Keyan
This not a big thing, just use the simple div structure and css it is possible
这不是什么大事，只要使用简单的 div 结构和 css 就可以了
.gallery-text {
float: left;
width: 48%;
margin: 1%;
}
.gallery-text p {
word-break: break-all;
}<div id="gallery-text">
<div class="gallery-text">
<h3> Header</h3>
<p>
BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
</p>
</div>
<div class="gallery-text">
<h3> Header</h3>
<p>
BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
BodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBodyBody
</p>
</div>
</div>