在同一行上向左，向右和向右浮动3个div [英] Float left, center, and float right 3 div on the same line
本文介绍了在同一行上向左，向右和向右浮动3个div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有3个包含文字和图片的 div 。
I have 3 div that contain both text and image.
我想在中间的第一个 div ，中间的第二个 div ，第三个 div 。我可以为第一 div 和第三 div 做CSS。第二个 div 会让我麻烦。
到目前为止，我有以下代码：
I would like to show them on the same line with the 1st div on left, 2nd div in the center, and the 3rd div on the right. I can do CSS for the 1st div and the 3rd div. The 2nd div causes me trouble.
I have the follow codes so far:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.onLeft {
display: inline;
float: left;
}
.onRight {
display: inline;
float: right;
}
</style>
</head>
<body>
<div class="onLeft"><h3>Left</h3><img src=images/left.png></div>
<div class="onCentre"><h3>Centre</h3><img src=images/centre.png></div>
<div class="onRight"><h3>Right</h3><img src=images/right.png></div>
</body>
</html>
有任何建议吗？
推荐答案
我不想有一个修正宽度，因为3 div可以有可变宽度
I do not want to have a fix width as the 3 div can have variable width
因此：
- 设置
display：table / table-cell
- set
display:table/table-cell
section {
display: table;
width: 100%
}
article {
border: 1px red solid;
display: table-cell;
}
<section>
<article>article 1</article>
<article>article 2</article>
<article>article 3</article>
</section>
- 设置
display：flex
- set
display:flex
section {
display: flex;
}
article {
border: 1px red solid;
flex:1
}
<section>
<article>article 1</article>
<article>article 2</article>
<article>article 3</article>
</section>
这篇关于在同一行上向左，向右和向右浮动3个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
