Question

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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>

中心主要div中的三个div

3 个答案: