为什么我不把它变成 2 列布局？答案

【问题标题】：Why do I not get this into a 2 column layout?为什么我不把它变成 2 列布局？
【发布时间】：2016-08-23 20:47:27
【问题描述】：

我对这个 CSS 感到绝望。我无法将其设置为 2 两列布局，因此我当前的 HTML 代码位于左侧，而更多图片位于右侧。

html body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-sarif;
  font-size: 10px;
}
.regal {
  margin: 2em;
  position: absolute;
  display: inline-block;
  border: 1px solid;
}
.regal img {
  max-width: 70%;
  display: block;
}
.box {
  width: 59%;
  height: 45.5%;
  position: absolute;
}
#regal_center {
  top: 17.6%;
  left: 7.3%;
}
#sortable1,
#sortable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
  width: 100%;
  height: 100%;
}
#sortable1 li,
#sortable2 li {
  float: left;
  cursor: pointer;
}

<body>
  <div class="regal">
    <img src="sources/images/tp_regal/TP_Regal_leer.jpg" alt="Regal" />
    <div id="regal_center" class="box">
      <ul id="sortable1" class="connectedSortable">
        <li id="medium" class="skin_001"></li>
        <li id="medium" class="skin_001"></li>
        <li id="small" class="skin_001"></li>
      </ul>
    </div>
  </div>
</body>

如果我制作 2 个新的 div 容器“左”、“右”和 50%，并将“富豪”类放入左侧，这样我就可以制作右侧，整个事情就消失了。我不知道我做错了什么。

任何帮助将不胜感激。非常感谢您。

【问题讨论】：

您的非工作代码在哪里？（左右类+html）
请提供jsfiddle的链接。
您是打算使用html body 还是打算使用html, body（以便将这些属性同时应用于<html> 和<body>）？你的 CSS 有很多困惑；使用 position: absolute 和 display: inline-block，将 CSS 与同一元素上的 ID 和类混合，等等。
我尝试使用提供的代码制作一个 codepen，但它并没有真正起作用。你能提供现场或codepen吗？
嗨，我不能让它工作，所以我把它删除了。我做了一个
并放入了
的完整内容

标签： html css

【解决方案1】：

我并没有真正遵循您的代码设置，但如果您想在同一个 div 中让两个图像彼此相邻，您可能想尝试其中一个想法。您可以获取更多信息align images side by side in html

尝试对容器使用 position: relative 和 position absolute 为您的图像

div.wrap {
        width: 600px;
        border: 1px solid #f00;
        height: 300px;
        position: relative;
    }

    .wrap img {
        border: 1px solid blue;
         position: absolute;
        bottom: 0;
    }

你也可以尝试浮动图片

img  {
    float: right;
}

【讨论】：