Создание индексной страницы только для empy divs (без отображения, даже после определения высоты / ширины)

0

Я пытаюсь создать страницу индекса, которая отображает три строки из 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;
}
Теги:

3 ответа

0
Лучший ответ

Ваше абсолютное позиционирование возится с макетом. В принципе, поскольку все 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.

Поделиться
0

удалите абсолютную позицию, 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;
}
Поделиться
  • 0
    Я удалил абсолютную позицию из CSS, но я все еще ничего не вижу на дисплее. Единственное, что появляется, это мой серый фон, но нет квадратов!
  • 0
    Он отлично работает на скрипке, вы уверены, что это не то, что вы делали в других частях вашего CSS?
Показать ещё 2 комментария
0

Проблема в том, что вы применяете стиль только к 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;
}

http://jsfiddle.net/keurr/1/

Поделиться
  • 0
    Благодарю. Я только применил CSS к классу sqtop, чтобы получить правильный формат. Я добавил два других (sqmid и sqbtm), но не могу ничего отобразить.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню