其他 div 下面，不在右边

Question

在 eBay 上回复：http://www.ebay.com/itm/281670060888

在我自己的网站上（位于 http://sallymilo.com/template-din.html），当运行在我自己的计算机上时，右侧 div 与左侧 div 的顶部对齐，但是当我把它放在 eBay 上时，右侧 div 在左侧下方 - 即使我将选项卡式部分缩小 200 像素。

有点主要CSS:

.row1 {
  width: 100%;
  position: relative;
  float: left;
  background: url(https://myimagefiles.com/dinnerman/tbg.png);
}

.row1l {
  width: 26%;
  position: relative;
  margin-left: 2em;
  float: left;
}

.row1r {
  width: 64%;
  position: relative;
  margin-left: 2em;
  margin-right: 2em;
  float: left;
}

还有一些标签部分 CSS:

.tabholder {
  width: 100%;
  height: 14em;
  font-size: 16px;
}

/* base font size for em-scaling */

.tabholder div.tabtops {
  width: 100%;
  max-width: 550px;
}

Answer 1

问题是在 ebay 中容器的宽度小于 1000px。这是因为您的硬编码宽度的内部部分会中断。

我建议您将宽度与 % 一起使用，这样无论容器的宽度如何，内部部分都将采用您提供的百分比数。

.container {
margin: 20px;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
}

.col-1 {
width: 20%;
background-color: rgba(0,0,0,0.2);
float: left;
}

.col-2{
width: 80%;
background-color: rgba(0,0,0,0.5);
float: left
}

<div class="container">
<div class="col-1">col-1</div>
<div class="col-2">col-2</div>
</div>

其他 div 下面，不在右边

One div below, not to right, of other

css

css-float