居中的主 div 中的三个 div

Question

我是一个非常新的程序员（一个半星期），如果这是愚蠢的，很抱歉。我想要的是一个具有固定宽度的主 div（以及每侧的自动边距以使其居中）和其他 3 个内部具有固定宽度的 div。右侧和中间对齐，但左侧将其推到新行。已经尝试将显示更改为内联块并将主 div 的宽度更改为远大于应有的宽度。

body {
  background-color: #D2B48C;
}

#main {
  width: 700px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
}

#mainImage {
  float: left;
  background-color: #ADD8E6;
  width: 600px;
  height: 600px;
}

#left img {
  float: left;
  width: 50px;
  height: 600px;
}

#right img {
  float: left;
  width: 50px;
  height: 600px;
}

<div id="main">
  <div id="left">
    <button><img src="images/left.svg"></button>
  </div>
  <div id="mainImage">
    <!-- <img src="images/cat1.jpg"> -->
  </div>
  <div id="right">
    <button><img src="images/right.svg"></button>
  </div>
</div>

Answer 1

<div> 元素是 block level elements（意味着它们各自呈现在文档的自己的行上）。

您可以通过多种方式更改此默认布局。

您目前正在使用 CSS float，但是这种技术存在问题，而且现在在许多情况下，麻烦大于其价值。

另一种方法是使用<span> 元素代替<div> 元素作为内部容器，因为<span> 元素是"inline elements" 被呈现为“内联”（从左到右） .

您可以将内部元素保留为 <div> 元素，但通过使用 CSS 更改它们的布局并将它们设置为 display:inline，然后它们将呈现为内联元素。

您也可以通过非常简单的添加一条使用 Flexbox layout 的 CSS 指令来解决问题，如下所示：

body {
  background-color: #D2B48C;
}

#main {
  width: 700px;
  height: 600px;
  
  /* Simply setting the container to display its content in a flex box solve the problem! */
  display:flex;
}

#mainImage {

  background-color: #ADD8E6;
  width: 600px;
  height: 600px;
}

#left img {

  width: 50px;
  height: 600px;
}

#right img {

  width: 50px;
  height: 600px;
}

<div id="main">
  <div id="left">
    <button><img src="images/left.svg"></button>
  </div>
  <div id="mainImage">
    <!-- <img src="images/cat1.jpg"> -->
  </div>
  <div id="right">
    <button><img src="images/right.svg"></button>
  </div>
</div>

Answer 2

你需要你的 3 个兄弟元素浮动 （或者至少前 2 个，如果足够的话，让第 3 个使用剩余空间），否则它们的行为就像普通块：

body {
  background-color: #D2B48C;
}

#main {
  width: 700px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
}

#mainImage {
  float: left;
  background-color: #ADD8E6;
  width: 600px;
  height: 600px;
}

#left, #left img {
  float: left;
  width: 50px;
  height: 600px;
}

#right, #right img {
  float: left;
  width: 50px;
  height: 600px;
}

<div id="main">
  <div id="left">
    <button><img src="images/left.svg"></button>
  </div>
  <div id="mainImage">
    <!-- <img src="images/cat1.jpg"> -->
  </div>
  <div id="right">
    <button><img src="images/right.svg"></button>
  </div>
</div>

display: table + table-cell / flex / grid 也是选项而不是float。

Answer 3

您真的很亲密，并且在 1.5 周内做得很好。您唯一的问题是您正在浮动并将宽度应用于图像而不是 div 包装它。

HTML 元素带有默认样式，有两种样式会阻止您实现您想要的。 <div> 是块级元素，所以如果你不浮动它们，你将会进行一些包装。此外，即使您浮动<div>，您也会有一些重叠，因为<button> 具有默认填充，这会将您的<div> 的宽度增加到按钮的50px + 填充。试试这个：

body {
  background-color: #D2B48C;
}

#main {
  width: 700px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
}

#mainImage, #left, #right {
  float: left;
  height: 600px;
  width: 50px;
}

#mainImage {
  background-color: #ADD8E6;
  width: 600px;
}

#left img, #left button, #right img, #right button {
  width: 100%;
  height: 100%;
}

<div id="main">
  <div id="left">
    <button><img src="images/left.svg"></button>
  </div>
  <div id="mainImage">
    <!-- <img src="images/cat1.jpg"> -->
  </div>
  <div id="right">
    <button><img src="images/right.svg"></button>
  </div>
</div>