Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果我制作2个新的div容器＆＃34; left＆＃34;，＆＃34; right＆＃34; 50％并且上课＃34; regal＆＃34;进入左边，这样我就能做出正确的一面，整个事情就消失了。我不知道自己做错了什么。

任何帮助都会非常感激。非常感谢你提前。

Answer 1

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

尝试使用position：relative为您的容器和位置绝对为您的图像

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

为什么我没有把它变成2列布局？

1 个答案: