主页 / 问题 / 574900
Accepted
Aliskin
Asked:2020-10-07 19:11:26 +0000 UTC2020-10-07 19:11:26 +0000 UTC

相对 css 列块定位

  • 772

有

<div id="a"></div>
<div id="b"></div>

为了将块 B 放置在块 A 旁边（块 A 的右侧），您需要以下代码：

#a{
positson: relative;
top:0px:left:0px;
widht:100px; height:200px;
}

#b{
positson: relative;
top:-200px:left:100px;
widht:100px; height:200px;
}

但是如果A块没有固定的高度（它会包含很多或很少的文字），那么B块如何定位呢？

如果您制作块 A absolute，那么它包含的内容会突出并向下移动（在页面的底部元素下方）。将 B 块放在 A 块中没有任何好处。

这是一个没有细节的问题。我强调了我不知道我不明白的地方。

我加：

虽然看起来这两个div可以放在一个div里面。并为这个 div 创建（分配属性）justify-content: flex-start;。我不知道，我需要检查一下。我会检查并回信。

css

1 个回答

  1. Best Answer

    1. 你在 css 中有严重的错误！

      正确的：

           #a{
       position: relative;
       top:0px;
       left:0px;
       width:100px; 
     }

   #b{
       position: relative;
       top:-200px:
       left:100px;
       width:100px; 
       height:200px;
     }

    2. 为了将块 B 放置在块 A 旁边（块 A 的右侧），您需要以下代码：

      根本没有评论（我们回到第 1 点）。

    3. 您可以通过多种方式将块 B 设置为紧邻块 A：

      • inline-block

         #a, #b {
   display: inline-block;
   vertical-align: top;
 }

      • float: left

        #a, #b {
   float: left;
}

      • 其他（弹性，桌子，...）

    例如：

    #a{
  position: relative;
  top:0px;
  left:0px;
  width: 100px; 
}

#b{
  position: relative;
  top:-200px:
  left:100px;
  width:100px; 
  height:200px;
}

#a, #b {
  float: left;
}



/* Стили для наглядности */
#a {
  background: #ccc;
}

#b {
  background: #777;
}
    <div id="a">
  контент без фикс. высоты
</div>
<div id="b"></div>

    没有内容：

    #a{
  position: relative;
  top:0px;
  left:0px;
  width: 100px; 
  
  min-height: 1px;
}

#b{
  position: relative;
  top:-200px:
  left:100px;
  width:100px; 
  height:200px;
}

#a, #b {
  float: left;
}



/* Стили для наглядности */
#b {
  background: #777;
}
    <div id="a">
  
</div>
<div id="b"></div>

    包装选项.wrap：

    .wrap {
  position: relative;
  display: flex;
}

#a{
  width: 100px; 
}

#b{
  width:100px; 
  height:200px;
}


/* Стили для наглядности */
#a {
  background: #ccc;
}
#b {
  background: #777;
}
    <div class="wrap">
  <div id="a">
  
</div>
<div id="b"></div>
</div>

    • 0

相关问题