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

Question

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

的答案时

以下是我的代码段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

你position你的元素（例如你对position: fixed;所做的那样）或你float他们。两者同时是不可能的。

以下是仅浮动元素的示例（我刚删除了排名规则）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以下是仅位置您的元素的示例（我刚删除了浮动规则并分别设置了left和right）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>