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 规则并分别设置了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>