Question

我正在尝试将这三个div元素对齐，以使两个第1列框位于左侧，彼此叠放，而第2列框则位于与两个第1列框的内联位置

我尝试了display：inline-block / inline和float：left;的各种组合；但我只是无法让这些东西整齐

<div id="wrapper" width="auto">
  <div id="left-container" style="background-color:lightgray;width:10%;line- 
    height:95px;float:left;">
    column1
  </div>
  <div id="left-container" style="background-color:gray;width:10%;line-height:95px;">
    column1
  </div>
  <div id="left-container" style="background-color:lightblue;width:50%;line- 
    height:190px;">
    column2
  </div>
</div>

非常感谢您的帮助！

Answer 1

使用此代码

css

<style>
#wrapper > div{
display:inline-block;
}
</style>

Answer 2

如果准备好交换元素，请尝试以下结构。

.left-container {
  float: left
}

.left-container>div {
  background-color: lightgray;
  line-height: 95px;
}

.right-container {
  background-color: lightblue;
  width: 50%;
  line-height: 190px;
  float: right;
}

<div id="wrapper" width="auto">
  <div class="left-container">
    <div>
      column1
    </div>
    <div>
      column1
    </div>
  </div>
  <div class="right-container">
    column2
  </div>
</div>

我的建议是尝试避免使用内联样式，并制作类并在那儿添加样式。否则，如果您在inline元素中提供样式，则覆盖样式会有点困难。

Answer 3

像这样吗？

您可以使用flex。

#wrapper {
  display: flex;
}

.inner-wrapper {
  min-width: 10px;
}

.left-container:nth-of-type(1) {
  background-color: lightgray;
  width: 100%;
  line-height: 95px;
}

.left-container:nth-of-type(2) {
  background-color: gray;
  width: 100%;
  line-height: 95px;
}

.left-container:only-of-type {
  background-color: lightblue;
  width: 100%;
  line-height: 190px;
}

<div id="wrapper" width="auto">

  <div class="inner-wrapper">
    <div class="left-container" style="">
      column1
    </div>
    <div class="left-container" style="">
      column1
    </div>
  </div>
  <div class="inner-wrapper">
    <div class="left-container" style="">
      column2
    </div>
  </div>

</div>

Answer 4

我只写了一个基本的flexbox示例。试试这个，希望对您有所帮助。谢谢

#wrapper {
  display: flex;
}

#left-container {
  display: flex;
  flex-direction: column;
  width: 100px;
}

#right-container {
  display: flex;
  width: 100px;
}

#left-container div,
#right-container div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="wrapper" width="auto">
  <div id="left-container">
    <div style="background-color: lightgray; height: 20px;">
      column1
    </div>
    <div style="background-color: gray; height: 50px;">
      column1
    </div>
  </div>
  <div id="right-container">
    <div style="background-color: lightblue;">
      column2
    </div>
  </div>
</div>

Answer 5

网格解决方案。使用grid-template-columns指定每列的列号和大小，然后使用grid-column和grid-row指定必须放置元素的位置。类为third的元素需要两行：

.wrapper {
  display: grid;
  grid-template-columns: 10% 50%;
}

.column-1 {
  background-color: gray;
}

.column-2 {
  background-color: lightblue;
}

.first {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.second {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.third {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

<div class="wrapper">
  <div class="column-1 first">
    column1
  </div>
  <div class="column-1 second">
    column1
  </div>
  <div class="column-2 third">
    column2
  </div>
</div>

将Div标签对齐到同一行

5 个答案: