Блог

Главная - Вопросы по программированию - Как разместить divs на веб-странице с помощью float?

Как разместить divs на веб-странице с помощью float?

#html #css

#HTML #css — код

Вопрос:

Я создал простую веб-страницу, используя HTML и CSS. Однако, когда я изменяю размер своего браузера, дивы перемещаются и теряют свои исходные позиции. Мое единственное ограничение заключается в том, что я должен придерживаться float и не использовать table и т.д.

Я хочу, чтобы мои макеты выглядели так —

введите описание изображения здесь

HTML —

 <!DOCTYPE html>
<html lang="en">

<body>
    <header>
        <div>
           <h1>Hello</h1>
        </div>   
    </header>

    <div class="a"><b>One</b></div>
    <div class="b"><b>Two</b></div>
    <div class="c"><b>Three</b></div>
    <p>
    <div class="d"><b>Four</b></div>
<body>

CSS —

 body {
  padding-top: 5em;
  text-align: center;
}

.a {
  float: left;
  width: 40%;
  vertical-align: middle;
  background-color: #fff;
  line-height: 7em;
  height: 7em;
  margin-left: 20em;
}

.b {
  float: left;
  width: 40%;
  vertical-align: middle;
  background-color: #fff;
  line-height: 7em;
  height: 7em;
  margin-left: 5em;
}

.c {
  float: left;
  width: 40%;
  vertical-align: middle;
  background-color: #fff;
  line-height: 7em;
  height: 7em;
  margin-left: 5em;
}

.d {
  float: left;
  width: 40%;
  vertical-align: middle;
  background-color: #fff;
  height: 7em;
  line-height: 7em;
  margin-left: 65.25%;
  margin-top: 2em;
}

Комментарии:

1. Почему вы ограничены в использовании float . Именно так макеты были взломаны десять лет назад. Это не то, для чего он был разработан. Теперь у нас есть Grid и Flexbox.

2. Я чувствую, что «потерять свою позицию» — это предполагаемое поведение float .

3. Вы также не закрываете <html> — и <p> -тег в своем коде. И похоже, что вы используете class es как id s . Способ, который вы используете, не обязательно неправильный, но использование атрибутов предполагаемым способом, как правило, легче понять (за исключением того, что вы используете .a , .b , и т. Д. Чаще, Чем показано здесь, Тогда вы делаете это абсолютно правильно).

Ответ №1:

Попробуйте использовать CSS flex или grid для адаптивных веб-страниц. Это лучшая практика для решения таких проблем.

Ответ №2:

Рекомендуется: CSS Flexbox

Родительскому элементу необходимы следующие свойства:

  • display: flex
  • flex-flow: row-reverse чтобы расположить дочерние элементы в нужном порядке
  • flex-wrap: wrap чтобы позволить им переносить
  • justify-content: space-between чтобы разместить их равномерно в родительском элементе без пробелов на обоих концах

Затем вам нужно будет указать для дочерних элементов, сколько их будет в строке, и определить их пробелы, используя margin следующее:
min-width: calc(100% / AMOUNT_CHILDREN - HORIZONTAL_GAP * 2) где AMOUNT_CHILDREN будет количество элементов в строке, и HORIZONTAL_GAP будет ли величина горизонтального разрыва также определена в margin -property .

Примечание:
Формула нужна только в том случае, если вы хотите, чтобы дочерние элементы занимали указанное пространство. Если вы хотите, чтобы они расширялись или сжимались, когда это кажется подходящим, вам не нужно его устанавливать.

 body {
  display: flex;
  flex-flow: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  margin: 0.2rem;
  min-width: calc(100% / 3 - 0.2rem * 2);
  background: gray; /* To show the size of the elements */
} 
 <div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>

CSS сетка

Родительскому элементу необходимы следующие свойства:

  • display: grid
  • grid-template-columns: repeat(3, 1fr) для 3 столбцов с равным пространством
  • Необязательно: gap: X где X величина разрыва между вашими элементами

Родительскому элементу также нужен атрибут dir="rtl" для размещения дочерних элементов справа налево (CSS Grid в настоящее время не поддерживает изменение направления переноса, поэтому мы возвращаемся к использованию HTML-атрибута dir ).

Направление родительского элемента наследуется его дочерними элементами, что может быть нежелательным. Чтобы отменить это, вам нужно будет добавить атрибут dir="ltr" к каждому дочернему элементу вручную.

 body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
div {
  background: gray; /* Only to show the size of the element */
} 
 <body dir="rtl">
  <div dir="ltr">A</div>
  <div dir="ltr">B</div>
  <div dir="ltr">C</div>
  <div dir="ltr">D</div>
</body>

Примечание:
HTML — это язык разметки, и его основная цель — передать смысл в том, как он отформатирован. Для оформления разметки следует использовать CSS.
Использование HTML-функций для стилизации, которые не предназначены для использования таким образом, делает разметку запутанной, особенно для людей, которые полагаются на правильно отформатированный HTML (например, слепые люди, использующие программы чтения с экрана).
Всегда старайтесь придерживаться CSS, когда дело доходит до стилизации. Конечно, группирующие элементы, такие как <div> , <span> , и т. Д., Могут и должны использоваться для поддержки стиля и могут иметь семантический смысл в том, как вы хотите их использовать.

Плавающий

Во-первых, floating на самом деле предназначен для того, чтобы окружающие элементы могли перемещаться вокруг плавающего элемента. Это означает, что способ, которым вы хотите его использовать, не тот, для которого он предназначен. Поэтому я рекомендую первый подход (рекомендуется: CSS Flexbox), но для полноты картины я покажу, как это сделать с помощью float .

Аналогично подходу Flexbox, мы можем присвоить нашим дочерним элементам вычисляемую ширину (формулу см. В разделе Рекомендуемые: CSS Flexbox), и float: right .

 div {
  margin: 0.2rem;
  min-width: calc(100% / 3 - 0.2rem * 2);
  float: right;
  background: gray;
} 
 <div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>

Примечание:
На мой взгляд, макет должен применяться в основном от родительского элемента.
Разрешение элементу размещать себя означало бы, что для отладки вам придется проверять правила CSS для каждого отдельного родственного элемента, чтобы найти причину проблемы.
Разрешение родительскому элементу размещать своих дочерних элементов приводит к более чистому и, возможно, меньшему количеству кода, аболее организованная структура кода и упрощает применение будущих изменений.

Очевидно, что не всегда возможно позволить родительскому элементу размещать своих дочерних элементов. position: absolute или подобное заставляет элемент выкладывать себя.

PS

Очевидно, есть много других способов добиться желаемого поведения. Однако некоторые из них могут быть «хакерскими» в некотором смысле или не соответствовать современному подходу. Можно использовать float: right , как было предложено, или даже использовать JS для размещения дочерних элементов.

Ответ №3:

Существует миллион способов организовать ваш сайт так, как вы хотите. Вот один из способов. пожалуйста, взгляните на этот пример, который я сделал для вас.

 .container {
  text-align: right;
}

.a {
  display: inline-flex;
  width: 32%;
  background-color: gray;
}

.b {
display: inline-flex;
   width: 32%;
  background-color: gray;
}

.c {
display: inline-flex;
  width: 32%;
 background-color: gray;
}

.d {
display: inline-flex;
 width: 33%;
 background-color: gray;
} 
 <!DOCTYPE html>
<html lang="en">

<body>
    <header>
        <div>
           <h1>Hello</h1>
        </div>   
    </header>
<div class="container">
    <div class="a"><b>One</b></div>
    <div class="b"><b>Two</b></div>
    <div class="c"><b>Three</b></div>
    <div class="d"><b>Four</b></div>
</div>    
<body>