Я пытаюсь создать страницу индекса, которая отображает три строки из 7 квадратов. Это звучит слабо, но у меня есть некоторые идеи jQuery, которые, я думаю, в конечном итоге заставят его выглядеть довольно круто. Я думал, что создание пустых divs для квадратов сделает трюк и позволит мне просто определить размеры (высоты и ширину) всех div. Проблема: не может заставить их отображаться.
Я прочитал много других вопросов об этой проблеме, но исправление всегда заключалось в определении ширины для div, но это не сработало для меня. Я также изучил настройку этого как таблицы, так как в основном это то, что я хочу, чтобы он выглядел, но MDN показывает как "не рекомендуется для макета", и я бы хотел написать код, который можно было бы понюхать.
Я сравнил свой код с некоторым кодом, который я видел на уроке jQuery в codecademy, и я не вижу никакой реальной разницы, которая заставит код codecademy отображать квадраты и мои, чтобы ничего не показывать. Любая помощь или предложения о том, как решить эту проблему и получить мое видение, чтобы сделать на странице было бы здорово! Благодарю.
Здесь html:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<container class="row">
<div class="sqtop"></div>
<div class="sqtop"></div>
<div class="sqtop"></div>
<div class="sqtop"></div>
<div class="sqtop"></div>
<div class="sqtop"></div>
<div class="sqtop"></div>
</container>
<container class="row">
<div class="sqmid"></div>
<div class="sqmid"></div>
<div class="sqmid"></div>
<div class="sqmid"></div>
<div class="sqmid"></div>
<div class="sqmid"></div>
<div class="sqmid"></div>
</container>
<container class="row">
<div class="sqbtm"></div>
<div class="sqbtm"></div>
<div class="sqbtm"></div>
<div class="sqbtm"></div>
<div class="sqbtm"></div>
<div class="sqbtm"></div>
<div class="sqbtm"></div>
</container>
</body>
</html>
И CSS:
body {
background-color: gray;
height: 100%;
width: 100%;
}
.row {
width: 600px;
height: 100px;
padding: 1em;
text-align: center;
}
.sqtop {
height: 20px;
width: 20px;
min-height: 10px;
min-width: 10px;
color: black;
background-color: yellow;
border-radius: 5px;
position: absolute;
display: inline-block;
vertical-align: middle;
}
Ваше абсолютное позиционирование возится с макетом. В принципе, поскольку все divs имеют абсолютную позицию, все они показывают друг на друга.
Другая проблема заключается в том, что вы только стиль одной из строк, в то время как другие два не имеют атрибутов CSS, прикрепленных к ним.
Вот исправление для CSS:
body {background-color: gray; height: 100%; высота: 100%; width: 100%; ширина: 100%; }.row { width: 600px; }.row {width: 600px; height: 100px; высота: 100 пикселей; padding: 1em; padding: 1em; text-align: center; text-align: center; }.sqtop,.sqmid,.sqbtm { height: 20px; }.sqtop,.sqmid,.sqbtm {height: 20px; width: 20px; ширина: 20 пикселей; min-height: 10px; min-height: 10px; min-width: 10px; мин-ширина: 10 пикселей; color: black; черный цвет; background-color: yellow; background-color: желтый; display: inline-block; display: inline-block; border-radius: 5px; border-radius: 5px; vertical-align: middle; вертикально-выровненный: средний; } }
Однако это не решает все проблемы. Ящики все равно должны быть в строках. Поскольку div не знает, где именно должен быть разрыв строки, вы можете добавить div, который создаст разрыв строки в HTML. Вот как это выглядело бы так:
<container class="row">
<div class="sqtop"></div>
<div class="sqtop"></div>
<div class="sqtop"></div>
<div class="sqtop"></div>
<div class="sqtop"></div>
<div class="sqtop"></div>
<div class="sqtop"></div>
</container>
<div style="clear:both"></div>
<container class="row">
<div class="sqmid"></div>
<div class="sqmid"></div>
<div class="sqmid"></div>
<div class="sqmid"></div>
<div class="sqmid"></div>
<div class="sqmid"></div>
<div class="sqmid"></div>
</container>
<div style="clear:both"></div>
<container class="row">
<div class="sqbtm"></div>
<div class="sqbtm"></div>
<div class="sqbtm"></div>
<div class="sqbtm"></div>
<div class="sqbtm"></div>
<div class="sqbtm"></div>
<div class="sqbtm"></div>
</container>
Это должно дать вам 3 строки с 7 div.
удалите абсолютную позицию, http://jsfiddle.net/ZG7jZ/
.sqtop {
height: 20px;
width: 20px;
min-height: 10px;
min-width: 10px;
color: black;
background-color: yellow;
border-radius: 5px;
/*position: absolute;*/
display: inline-block;
vertical-align: middle;
}
Проблема в том, что вы применяете стиль только к sqtop
. Попробуй это:
body {
background-color: gray;
height: 100%;
width: 100%;
}
.row {
padding: 1em;
text-align: center;
overflow: hidden;
}
.row>div {
height: 20px;
width: 20px;
color: black;
background-color: yellow;
border-radius: 5px;
vertical-align: middle;
display: inline-block;
}