Question

所以在StackOverflow上有很多这样的问题，但似乎并没有对我的情况有所帮助。

如您所见，我在屏幕上有2个div。

左边的一个

float:left;

而中间的那个是

margin-left-auto;
margin-right:auto;

所以我的问题是，当我想把另一个div放在中间DIV左边右边那个时，我将如何继续这样做？

float:right;

已经在右边的div上尝试了，但由于左边的div被浮动，所以只是把它放在一个不同的行中。

那我该怎么做？非常感谢答案。

我可以提供更多代码，例如在需要时如何安排DIV＆＃34;

Answer 1

Flexbox解决方案

将项目包装在父容器中并设置display: flex
flex: 1将增长并缩小1倍。
flex: 2会增长并缩小2倍。

＆＃13;

.container {
  display: flex;
}
.left,
.right {
  flex: 1;
  text-align: center;
  background: #E77F24;

}
.middle {
  flex: 2;
  text-align: center;
  background: lightblue;
  margin: 0 10px;
}

＆＃13;

<div class="container">
  <div class="left">1</div>
  <div class="middle">2</div>
  <div class="right">3</div>
</div>

＆＃13;

Answer 2

我所做的只是输入

saveOrUpdate

在容器div中，它工作得很好。

Answer 3

要使用左侧和右侧边栏创建内容主体，您可以浮动：向左并简单地为CSS中的每个div定义宽度。

ie: 
.div1 {width:25%}
.div2 {width:50%}
.div3 {width:25%}

如果您想考虑填充，只需在每个div宽度上减少除以3的量。

ie: http://jsfiddle.net/simsketch/9tj4va6r/

它可能会帮助您开始使用像Foundation或Bootstrap这样的框架。 Foundation提供了许多入门模板，可帮助您入门。 http://foundation.zurb.com/templates.html

使用网格系统时，您可以简单地包含foundation.css库，而不需要在自定义CSS中定义宽度，并引用这些类。

ie: <div class="large-6">content</div>

对于你之后的布局，这可以解决问题。 http://foundation.zurb.com/templates/feed.html

他们在那里做的只是：

<div class="large-3"></div>
<div class="large-6"></div>
<div class="large-3"></div>

只要数字加起来十二，它们就能完美契合。

这是对网格系统的简要介绍。有关更多信息，请参阅以下内容：

http://foundation.zurb.com/
http://getbootstrap.com/
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

这是两个最受欢迎的前端框架，但还有几十个并且它们都很精彩。

Answer 4

	.div1{
				width:25%;
				overflow:auto;
				float:left;
				background-color:blue;
				color:white;
				text-align:center;
				
			}
			.div2{
				width:50%;
				overflow:auto;
				float:left;
				background-color:red;
				color:white;
				text-align:center;
			}
			.div3{
				width:25%;
				overflow:auto;
				float:left;
				background-color:green;
				color:white;
				text-align:center;
			}

<body>
		<div class="div1">First Div</div>
		<div class="div2">Second Div</div>
		<div class="div3">Third Div</div>
    </body>

如何将2个div放在一个巨大的div旁边

4 个答案: