Question

所以我的代码有一个小问题，想问一下我是否可以在绝对div内浮动左右元素。

我也应该将此div的每个元素都设为绝对，并将其放置在相对元素上吗？

还是有一种使用浮动或其他方法解决此问题的方法？

CSS代码：

#story{
position: absolute;
margin-top:180px;
margin-left:10px;
width: 450px;


}
#story .img-left{
    float:left;
}
#story p{
    float:left;
}



#sidebar{
    position: absolute;
    margin-top:180px;
    margin-left:550px;
    background-color: white;
    border-style: solid;
    border-color:brown;
    border-width: 5px;

}

我的索引如下所示：

应如下所示：（最终结果）：

我不确定如果不使用（position）东西是否可以做到这一点，但我无法避免，因为我发现它可以解决大多数问题

感谢您阅读我的问题！并提前感谢：）

Answer 1

您不应将float：left与p标记一起使用只需在.img-left中使float：right并将其从段落标签中删除即可。并将图像标签保留在段落标签中

<p>paragraph contents<img src="" style="float:right" ></p>

为了获得您想要的结果

Answer 2

如果您只想让一个元素向左移动而一个元素向右移动，则可以使用以下代码：

您可以通过制作内部div来实现此目的，您可以使用div和height 100％扩展为内部width的大小。

.abs-div {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid green;
  width: 50%;
  height: 50%;
}

.inside-div {
  margin: 0 auto;
  display: block;
  width: 98%;
  height: 98%;
  border: 1px solid red;
}

.inside-div #right-elm {
  float: right;
}

.inside-div #left-elm {
  float: left;
}

<div class="abs-div">
  <div class="inside-div">
    <p id="right-elm">Right Element</p>
    <p id="left-elm">Left Element</p>
  </div>
</div>

Answer 3

您可以设置带有内容的图像并将其应用于float:right

.abs {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid #999999;
  width: 40%;
}

.inside {
  margin: 0 auto;
  display: block;
  text-align:justify;
}

.inside .leftdiv {
  display:inline-block;
}

.inside .rightimg {
  float: right;
  width:145px;
}

.inside .rightimg img{  
  width:100%;
}

<div class="abs">
  <div class="inside">
    <div class="leftdiv"><div class="rightimg"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></div>Only an entrepreneur can decode this? Below are some pieces in the form of my thoughts, try and see if you create a picture out of it. Charles Darwin once said, “It is not the strongest of the species that survives, nor the most intelligent, but the one most responsive to change."</div>
    
  </div>
</div>

Answer 4

是的，您可以将元素浮动在绝对div内。

<html>
    <head>
        <style>
            .content
            {
              position: absolute;
              top: 50%;
              left: 50%;
              max-width: 300px;
              width: 500px;
              padding: 100px 0px;
              transform: translate(-50%,-50%);
              border: 1px solid red;
            }
            .element
            {
             float: right;
            }
        </style>
    </head>
    <body>
        <section class="card">
          <div class="content">
            <p class="element">
               Element 
            </p>
          </div>
        </section>
    </body>
</html>

是否可以在绝对div内浮动元素？

4 个答案: