Question

我有一个包含两个其他div的div，应该以tops inline显示。我已经遇到了问题，他们打算在顶层的一个层面上，但是当我用不同数量的文本填充它们时，会向上推。如果两个div具有相同的大小并且将完全内联对齐，那将是非常棒的。

父div的CSS：

#parent{
position:relative;
border:1px solid black;
width:303px;
}

第一个div的CSS：

#firstdiv{  
position:absolute; 
bottom:0; 
left:0; width:150px; 
border:1px solid black;
}

第二个div的CSS：

#seconddiv{  
position:absolute; 
bottom:0; 
right:0;
width:150px; 
border:1px solid black;
}

结果：

JSfiddle!

Answer 1

您可以像这样尝试flex：

＆＃13;

* {
  box-sizing: border-box;
}

#parent {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  width: 300px;
  text-align: center;
}

#parent span {
  width: 100%;
  padding: 20px;
}

.item {
  flex: 1;
  border: 1px solid black;
}

＆＃13;

<div id="parent">
  <span>some content</span>
  <div class="item">
    some content
  </div>
  <div class="item">
    more more content and even more
  </div>
</div>

＆＃13;

Answer 2

如果您希望它根据您的屏幕截图显示。当你向它添加更多元素时，使用position：absolute将是一个灾难。改用flex。

您可以看到子容器保持原始高度。这是因为类flex-item使用flex-start将它们对齐在顶部。但如果你想让它们占据全高。只需删除flex-start;

#parent {
  margin-top: 30px;
  position: relative;
  border: 1px solid black;
  width: 303px;
  text-align: center;
}

.sub-container {
  display: flex;
}

.flex-item {
  align-self: flex-start; //Use this only if you want uneven heights and want to align them from top
}

#firstdiv {
  width: 150px;
  border: 1px solid black;
}

#seconddiv {
  width: 150px;
  border: 1px solid black;
}

<div id="parent">
  Hello Stack overflow!
  <div class="sub-container">
    <div id="firstdiv" class="flex-item">
      First div with more content
    </div>
    <div id="seconddiv" class="flex-item">
      second div
    </div>
  </div>
</div>

Answer 3

您可以移除所有位置属性，并在第一个和第二个div中使用display: table-cell

见下面的代码：

#parent {
  border: 1px solid black;
  width: 400px;
  text-align: center;  
}

#firstdiv {
  display: table-cell;
  
  width: 200px;
  border: 1px solid black;
}

#seconddiv {
  display: table-cell;
  width: 200px;
  border: 1px solid black;
}

<div id="parent"> <span>Hello text<span>
  <div id="firstdiv">Stack </div>
  <div id="seconddiv">Overflow ing text and text adn text and other text </div>
</div>

Answer 4

将两个绝对定位子项的顶部设置为相同的值。

e.g。 20px或期望值

https://www.w3schools.com/cssref/pr_pos_top.asp

即

#firstdiv {  
  position: absolute; 
  bottom: 0; 
  left: 0;
  width: 150px; 
  border: 1px solid black;
  top: 20px
}

#seconddiv {  
  position: absolute; 
  bottom: 0; 
  right: 0;
  width: 150px; 
  border: 1px solid black;
  top: 20px;
}

Answer 5

您可以使用table显示属性这将确保所有单元格大小相同，并允许您删除定位。

jsFiddle

＆＃13;

#parent {
    display: table;
    border: 1px solid black;
    width: 303px;
}

#content {
    display: table-row;
}

#firstdiv {  
    width: 50%; 
    display: table-cell;
    border: 1px solid black;
} 

#seconddiv {  
    display: table-cell ;
    width: 50%; 
    border: 1px solid black;
}

＆＃13;

<div id="parent">
  <div id="content">
    Hello Stackoverflow!
  </div>
  
  <div id="firstdiv">
    first div with more content
  </div>
  <div id="seconddiv">
    second div
  </div>
</div>

＆＃13;

Answer 6

删除

bottom: 0;

来自第一个和第二个div。

将div与顶部内联

6 个答案: