javascript - 左右两侧分别放置两个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您的元素(例如您对 position:fixed; 所做的那样)或您 float他们。两者同时进行是不可能的。

这是仅 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>

这是仅定位元素的示例(我刚刚删除了 float 规则并分别设置了左和右):

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>