Question

这似乎必须与最初级的HTML问题有关。我想像这样布置一些div元素

但是当我尝试使用HTML这样做时

<style>
  .outer-container {
    border: 8px solid red;
  }

  .my-header {
    /* border: 4px solid blue; */
    display: flex;
    font-size: medium;
    flex-direction: column;
  }

  .my-row {
    border: 3px solid orange;
    flex-direction: row;
  }

  .my-row-label {
    border: 2px solid orchid;
    flex-direction: column;
  }

  .my-row-value {
    border: 2px solid lime;
    flex-direction: column;
  }
</style>

<div class="outer-container">
  <div class="my-header">
    A Title
  </div>
  <div class="my-row">
    <div class="my-row-label">
      Row 1
    </div>
    <div class="my-row-value">
      Value 1
    </div>
  </div>
  <div class="my-row">
    <div class="my-row-label">
      Row 2
    </div>
    <div class="my-row-value">
      Value 2
    </div>
  </div>
</div>

行标签和行值类垂直堆叠，而不是在行内从左到右移动。我在做什么错了？

Answer 1

在这里
如果您了解了这些，就必须使用grid-row和grid-column进行这种布局。

.container {
  display: grid;
  border: 2px solid black;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  padding: 5px;
}

.container div {
  min-height: 50px;
  border: 1px solid black;
}

.box1 {
  grid-column: span 2;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
</div>

让我知道它是否对您不起作用。Also link of my codepen

Answer 2

有2种方法可以做到。要么使用CSS网格，要么使用Flexbox。

CSS网格：您预定义了网格。在这种情况下，有2列grid-template-columns: repeat(2, 1fr);。标头使用grid-column: span 2;

跨整个宽度

body {
  margin: 0;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  grid-gap: 5px;
}

div {
  border: 1px solid black;
  padding: 5px;
}

#header {
  min-height: 30px;
  grid-column: span 2;
}

.content {
  min-height: 50px;
}

<body>
  <div id="header">Header</div>
  <div class="content">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
  <div class="content">Content 4</div>
</body>

Flexboxes：在这里，您将内容框包装到Flex包装器中。内容之间用空格隔开。边框的厚度非常合适。

body {
  margin: 0;
  padding: 5px;
}

#header,
.flex div{
  border: 1px solid black;
  padding: 5px;
}

#header {
  min-height: 30px;
  margin-bottom: 5px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.content {
  min-height: 50px;
  width: calc(50% - 14.5px);
  margin-bottom: 5px;
}

<body>
  <div id="header">Header</div>
  <div class="flex">
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
    <div class="content">Content 4</div>
  </div>
</body>

如何并排布置两个div元素

2 个答案: