css 如何将div4放置在div1的右侧

vi4fp9gy 于 2023-04-01 发布在其他

关注(0)|答案(1)|浏览(190)

这是我试图用来使.div4的位置位于div 1的右侧的代码

.div1 {
  background-color: #A6C3EE;
  position: relative;
  text-align: left;
  margin: 30px;
  height: 550px;
  width: 1200px;
  color: white;
}

.div2 {
  background-color: #BDE2FE;
  position: static;
  text-align: center;
  margin: 30px;
  height: 450px;
  width: 300px;
}

.div3 {
  background-color: #BDE2FE;
  position: absolute;
  width: 450px;
  height: 150px;
  bottom: 0px;
  right: 15%;
  left: 45%;
  margin: 30px;
  margin-left: -150px;
}

.div4 {
  background-color: #BDE2FE;
  width: 100px;
  height: 450px;
  margin-left: auto;
  margin-right: 0;
}

<body style="background-color:#4C5979">
  <div class="div1">
    <h1>Website</h1>

    <div class="div2">
      <p>info about website </p>
      <img src="prototype3.png">

    </div>
    <!--div2-->
    <div class="div3">
      <p></p>

    </div>
    <!-- div3 -->
    <div class="div4">

      <div>hellow world</div>

    </div>
    <!-- div4-->
  </div>
  <!-- div1 -->
</body>

我尝试了position:fixed和position:relative属性，但它们都给予了相同的不希望的结果，我还尝试了float属性，但也不起作用

css

来源：https://stackoverflow.com/questions/75869518/how-do-i-position-div-4-to-the-right-inside-div-1

1条答案

按热度按时间

5kgi1eie1#

将position: absolute;添加到.div4，然后您可以通过方向属性（顶部，右侧，左侧，底部）将div4放置在任何您想要的位置。如果您想将div4放置在div1内的右侧，您可以使用以下内容：

.div4 {
  background-color: #BDE2FE;
  width: 100px;
  height: 450px;
  margin-left: auto;
  margin-right: 0;
  /****************/
  position: absolute;
  right: 0;
  top: 0
  /****************/
}

赞(0）回复(0）举报 2023-04-01

我来回答

css 如何将div4放置在div1的右侧

1条答案

相关问题

热门标签

最新问答