分别在左右两侧放置两个div个容器，每个div之间有一个空隙

Question

我试图将两个 div 容器分别放置在左侧和右侧，每个 div 之间都有一个间隙。我正在使用以下代码，但无法使第二个 div 位于右侧，尽管我按照这个问题 Position a div container on the right side

的答案添加了左右浮动

这是我的代码片段：

var getElement = document.getElementById('rectTopNearestBooth1');
getElement.style.width = "30%";
getElement.style.height = "200px";
getElement.style.zIndex = "1";
getElement.style.position = "fixed"
getElement.style.borderStyle = "solid"
getElement.style.background = "red"
getElement.style.bottom = "0px"
  // getElement.style.marginBottom = "0%"
getElement.style.marginLeft = "10%"
getElement.style.cssFloat = "left"

var getElement2 = document.getElementById('rectTopNearestBooth2');
getElement2.style.width = "0%";
getElement2.style.height = "200px";
getElement2.style.zIndex = "1";
getElement2.style.position = "fixed"
getElement2.style.borderStyle = "solid"
getElement2.style.background = "red"
getElement2.style.bottom = "0px"
getElement2.style.cssFloat = "right"
  // getElement.style.marginBottom = "0%"
getElement2.style.marginRight = "10%"

<div id="rectTopNearestBooth1">
  <div>
    <img id="topNearestBoothLogoIcon1" />
  </div>
  <div id="topNearestBoothName1"></div>
  <div>
    <img id="nearestBoothTimeIcon1" />
    <div id="nearestBoothTimeText1"></div>
  </div>
  <div>
    <img id="nearestBoothDistIcon1" />
    <div id="nearestBoothDistText1"></div>
  </div>
</div>

<div id="rectTopNearestBooth2">
  <div>
    <img id="topNearestBoothLogoIcon2" />
  </div>
  <div id="topNearestBoothName2"></div>
  <div>
    <img id="nearestBoothTimeIcon2" />
    <div id="nearestBoothTimeText2"></div>
  </div>
  <div>
    <img id="nearestBoothDistIcon2" />
    <div id="nearestBoothDistText2"></div>
  </div>
</div>

有人可以帮助我吗？谢谢！

Answer 1

你 position your elements (e.g. as you did with position: fixed;) or you float 他们。不可能同时出现。

这里是一个只浮动元素的例子（我刚刚删除了位置规则）：

var getElement = document.getElementById('rectTopNearestBooth1');
getElement.style.width = "30%";
getElement.style.height = "200px";
getElement.style.borderStyle = "solid"
getElement.style.background = "red"
getElement.style.marginLeft = "10%"
getElement.style.cssFloat = "left"

var getElement2 = document.getElementById('rectTopNearestBooth2');
getElement2.style.width = "30%";
getElement2.style.height = "200px";
getElement2.style.borderStyle = "solid"
getElement2.style.background = "red"
getElement2.style.cssFloat = "right"
getElement2.style.marginRight = "10%"

<div id="rectTopNearestBooth1">
  <div>
    <img id="topNearestBoothLogoIcon1" />
  </div>
  <div id="topNearestBoothName1"></div>
  <div>
    <img id="nearestBoothTimeIcon1" />
    <div id="nearestBoothTimeText1"></div>
  </div>
  <div>
    <img id="nearestBoothDistIcon1" />
    <div id="nearestBoothDistText1"></div>
  </div>
</div>

<div id="rectTopNearestBooth2">
  <div>
    <img id="topNearestBoothLogoIcon2" />
  </div>
  <div id="topNearestBoothName2"></div>
  <div>
    <img id="nearestBoothTimeIcon2" />
    <div id="nearestBoothTimeText2"></div>
  </div>
  <div>
    <img id="nearestBoothDistIcon2" />
    <div id="nearestBoothDistText2"></div>
  </div>
</div>

这里是一个仅定位你的元素的例子（我刚刚删除了浮动规则并分别设置了left和right）：

var getElement = document.getElementById('rectTopNearestBooth1');
getElement.style.width = "30%";
getElement.style.height = "200px";
getElement.style.borderStyle = "solid"
getElement.style.background = "red"
getElement.style.left = "10%"
getElement.style.position = "fixed"

var getElement2 = document.getElementById('rectTopNearestBooth2');
getElement2.style.width = "30%";
getElement2.style.height = "200px";
getElement2.style.borderStyle = "solid"
getElement2.style.background = "red"
getElement2.style.position = "fixed"
getElement2.style.right = "10%"

<div id="rectTopNearestBooth1">
  <div>
    <img id="topNearestBoothLogoIcon1" />
  </div>
  <div id="topNearestBoothName1"></div>
  <div>
    <img id="nearestBoothTimeIcon1" />
    <div id="nearestBoothTimeText1"></div>
  </div>
  <div>
    <img id="nearestBoothDistIcon1" />
    <div id="nearestBoothDistText1"></div>
  </div>
</div>

<div id="rectTopNearestBooth2">
  <div>
    <img id="topNearestBoothLogoIcon2" />
  </div>
  <div id="topNearestBoothName2"></div>
  <div>
    <img id="nearestBoothTimeIcon2" />
    <div id="nearestBoothTimeText2"></div>
  </div>
  <div>
    <img id="nearestBoothDistIcon2" />
    <div id="nearestBoothDistText2"></div>
  </div>
</div>

Answer 2

这是一个使用 css 的解决方案：

div[id^="rectTopNearestBooth"] {
  display: inline-block;
  width: 30%;
  height: 200px;
  box-sizing: border-box;
  margin: 0 10%;
  border: solid black;
  background: tomato;
  float: left;
}

<div id="rectTopNearestBooth1">
  <div>
    <img id="topNearestBoothLogoIcon1" />
  </div>
  <div id="topNearestBoothName1"></div>
  <div>
    <img id="nearestBoothTimeIcon1" />
    <div id="nearestBoothTimeText1"></div>
  </div>
  <div>
    <img id="nearestBoothDistIcon1" />
    <div id="nearestBoothDistText1"></div>
  </div>
</div>

<div id="rectTopNearestBooth2">
  <div>
    <img id="topNearestBoothLogoIcon2" />
  </div>
  <div id="topNearestBoothName2"></div>
  <div>
    <img id="nearestBoothTimeIcon2" />
    <div id="nearestBoothTimeText2"></div>
  </div>
  <div>
    <img id="nearestBoothDistIcon2" />
    <div id="nearestBoothDistText2"></div>
  </div>
</div>

分别在左右两侧放置两个div个容器，每个div之间有一个空隙

Position two div containers on the left and right side respectively, and each div has a gap in between

html

javascript

css

css-position

css-float