Поплавок снизу? Расположение div на дне других div

Question

Поплавок снизу? Расположение div на дне других div

0

Я все больше понимаю, что у меня нет хорошего понимания позиционирования css. Увидев, что это часто вызывает проблемы для меня, я пытался создать разные макеты только для практики. Я пытаюсь создать сайт, который может содержать 6 разных div, которые отображают 6 разных точек данных. Два больших divs и верхняя часть каждого покрытия 50% экрана, 4 меньших divs ниже каждого покрытия 25% экрана.

Я провел некоторое исследование и обнаружил, что float left даст мне результаты для верхней половины, но я не могу понять, как расположить нижние четыре divs, чтобы они покраснели с divs сверху и сбоку. Все, что я пробовал до сих пор, не удается, когда я изменяю размер экрана. Может кто-нибудь указать мне в правильном направлении, пожалуйста?

вот фото того, что у меня есть до сих пор. Верхняя половина права, нижняя половина - это то, что я застрял

вот мой html

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>flatpage</title>


  <link rel="stylesheet" href="css.css">

  <div id ="main">

  <div class = "navbar">
  </div>

  <div class =  "total_number_container">
  </div>

  <div class = "searched_number_container">
  </div>

  <div class = "attribute_one>"
  </div>

  <div class = "attribute_two>"
  </div>

  <div class = "attribute_three>"
  </div>

  <div class = "attribute_four>"
  </div>
  </div>

</head>

<body>
  <script src="js/scripts.js"></script>
</body>
</html>

вот мой css

body {
background-color:#ecf0f1;
margin:0;
}

.navbar{
background-color:#2c3e50;
width: 100%;
height: 50px;
margin:0;
padding:0;
}

.total_number_container {
background-color:#3498db;
float: left;
width: 50%;
height: 300px;
}

.searched_number_container {
float:left;
background-color:#2980b9;
width: 50%;
height: 300px;
}

.attribute_one {
background-color:#5C97BF;
width: 25%;
height: 300px;
}

.attribute_two {
background-color:#34495e;
width: 25%;
height: 300px;
}

.attribute_three {
background-color:#5C97BF;
width: 25%;
height: 300px;
}

.attribute_four {
background-color:##34495e;
width: 25%;
height: 300px;
}

jonjon 28 апр. 2014, в 16:52

Источник

1

Ну, для начала, ваш HTML недействителен.
j08691 28 апр. 2014, в 13:55
0

Весь ваш код DIV должен быть в ТЕЛЕ. Тег сценария может находиться в BODY или HEAD - большинство разработчиков помещают их либо в HEAD, либо непосредственно перед закрывающим тегом BODY.
Billy Moat 28 апр. 2014, в 13:57
0

<div class = "attribute_two>" эта кавычка принадлежит закрытию > , и я бы удалил эти пробелы вокруг знака равенства, хотя я не уверен, что они обязательно недействительны.
James Duffy 28 апр. 2014, в 14:00
1

Спасибо @BillyMoat
jonjon 28 апр. 2014, в 14:01
0

Совет: используйте validator.w3.org, чтобы проверить свой HTML, и jigsaw.w3.org/css-validator, чтобы проверить CSS, прежде чем пытаться выяснить, правильно ли настроено ваше CSS-позиционирование. Если у любого из них есть синтаксические ошибки, вы застрянете, пытаясь отладить то, что ваш браузер не может правильно понять / отобразить.
jingtao 28 апр. 2014, в 14:07
0

спасибо @jingtao, я сделаю это.
jonjon 28 апр. 2014, в 14:10

Показать ещё 4 комментария

Теги:

html

css

3 ответа

1

    <div class = "attribute_one>"
      </div>

      <div class = "attribute_two>"
      </div>
<div class = "attribute_three>"
  </div>

  <div class = "attribute_four>"
  </div>

Выше - часть вашего HTML-кода, и это неправильно. Что вы хотите

    <div class = "attribute_one">
      </div>

      <div class = "attribute_two">
      </div>
<div class = "attribute_three">
  </div>

  <div class = "attribute_four">
  </div>

После этого просто используйте float: left для всех четырех divs и установите ширину до 25%. И после этого лучше всего поставить другой div

<div style="clear:both"></div>

Aditzu 28 апр. 2014, в 12:12

1

Вы имеете в виду, что-то вроде ниже?

Это может быть достигнуто с помощью float и% sizing.

Демо-скрипт

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
div:nth-child(1), div:nth-child(2) {
    width:50%;
}
div {
    box-sizing:border-box;
    float:left;
    border:1px solid black;
    width:25%;
    height:50%;
}

SW4 28 апр. 2014, в 11:26

Ещё вопросы

Ну, для начала, ваш HTML недействителен.
Весь ваш код DIV должен быть в ТЕЛЕ. Тег сценария может находиться в BODY или HEAD - большинство разработчиков помещают их либо в HEAD, либо непосредственно перед закрывающим тегом BODY.
<div class = "attribute_two>" эта кавычка принадлежит закрытию > , и я бы удалил эти пробелы вокруг знака равенства, хотя я не уверен, что они обязательно недействительны.
Совет: используйте validator.w3.org, чтобы проверить свой HTML, и jigsaw.w3.org/css-validator, чтобы проверить CSS, прежде чем пытаться выяснить, правильно ли настроено ваше CSS-позиционирование. Если у любого из них есть синтаксические ошибки, вы застрянете, пытаясь отладить то, что ваш браузер не может правильно понять / отобразить.

jingtao · Accepted Answer · 2014-04-28T11-34-00.000Z

Эта скрипта исправляет ошибки синтаксиса в исходном коде HTML и CSS и использует исходные классы (.attribute_one,.attribute_two,.attribute_three,.attribute_four) для достижения желаемых результатов.

http://jsfiddle.net/2G8C7/

Ключевыми недостатками были:

.attribute_one, .attribute_two, .attribute_three, .attribute_four {
    float: left;
}

И следующая синтаксическая ошибка HTML:

<div class = "attribute_one>" <!-- notice the closing quote is in the wrong place -->
</div>

которые должны быть

<div class = "attribute_one">
</div>

Также была опечатка в CSS, где background-color для .attribute_four имел два # (##34495e)