как расположить два элемента div бок о бок

#html #css

#HTML #css

Вопрос:

Похоже, что речь идет о самом простом вопросе 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>

классы меток строк и значений строк располагаются вертикально, а не слева направо внутри строк. Что я делаю не так?

Ответ №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>

Дайте мне знать, если это не сработает для вас.Также ссылка на мой codepen

1. Я предложил вам отредактировать вашу сетку и сократить CSS-код на 2/3. И позволяет ему работать, если добавлено больше полей содержимого.

2. @tacoshy спасибо за ваше время и усилия. Не могли бы вы поделиться со мной какой-либо документацией или видео на YouTube об этой продвинутой сетке css?

3. на самом деле это не продвинутая css-сетка. просто обычная css-сетка, простая и короткая. Вам не нужно указывать точное положение столбца, они сами выравниваются. Все, что вам нужно, это указать заголовку, чтобы он охватывал оба столбца с grid-column: span 2; помощью then, вам не нужно перечислять все поля, которые вам нравятся box1, box2, box3... . У них есть одна общая черта, они являются .container дочерними элементами . Таким образом, вы адресуете их все с .container div помощью . Нет необходимости перечислять все. И последнее, но не менее важное: элементы сетки не нуждаются в поле. Это то, что у вас есть grid-gap , а также в качестве дополнения к сетке-контейнеру.

4. для получения полного руководства: css-tricks.com/snippets/css/complete-guide-grid Документация Firefox: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Ответ №2:

Есть 2 способа сделать это. Либо с использованием сетки CSS, либо с использованием гибких блоков.

CSS-Grid: вы предварительно определяете сетку. В данном случае с 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>