Div не показывает указанную высоту или ширину

0

Я пытаюсь иметь 4 divs с разными цветами фона в контейнере div, поэтому есть один во всех четырех углах с поперечным крестом steelblue посередине. Проблема в том, что я указываю ширину и высоту элементов div в моей таблице стилей, но они фактически не изменяют высоту div, а только добавляет контент. Кроме того, 4 внутренних divs не имеют ширины, указанной в таблице, но скорее подходят для ширины родительского div. Просто fyi, в классе объектов, я переключил отображение attrubute на блок и встроенный, чтобы увидеть, помогает ли это, но это не так. Вот мой html-код:

<!DOCTYPE HTML>
<html>
<head>
    <title>Divs In Div</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
       <div class="feature a">&nbsp;</div>
    <div class="feature b">&nbsp;</div>
    <div class="feature c">&nbsp;</div>
    <div class="feature d">&nbsp;</div>
</div>

и вот мой код css:

.container {
width: 700px;
height: 700px;
border: 5px solid black;
margin: 0px;
padding: 0px;
display: inline-block;
}

.feauture {
width: 348px;
height: 348px;
padding: 0px;
margin: 0px;
display: inline-block;
text-align: center;
}

.a {
background-color: yellow;
border-bottom: 2px solid steelblue;
border-right: 2px solid steelblue;
}

.b {
background-color: red;
border-bottom: 2px solid steelblue;
border-left: 2px solid steelblue;
}

.c {
background-color: blue;
border-top: 2px solid steelblue;
border-right: 2px solid steelblue;
}

.d {
background-color: purple;
border-top: 2px solid steelblue;
border-left: 2px solid steelblue;
}
Теги:

2 ответа

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

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

HTML необходимо изменить, если вы хотите использовать inline-block для блоков .feature. Посмотрите, почему здесь проблема. Если вам нравится использовать float:left; для них все вместо этого вам не нужно это делать.

В зависимости от того, хотите ли вы использовать box-sizing для всех элементов, которые у вас есть (например, с помощью решения Normalize.css или просто делайте то, что я делаю в своей скрипке), вам нужно будет изменить ширину и высоту для учета граница только на контейнере. Посмотрите, как, почему и плюсы/минусы здесь на box-sizing: border-box; ,

Ваш CSS не страшен, поэтому изменения, которые я сделал, были в основном эстетическими, но главное, что вы должны решить, это display: inline-block; или float: left; внутри .feature { }.

FYI - использование float: left; подразумевает display: block; , не говоря уже о <div> используя его по умолчанию.

Использование display: inline-block;

Новый HTML:

<div class="container"><div class="feature a">
    &nbsp;</div><div class="feature b">
    &nbsp;</div><div class="feature c">
    &nbsp;</div><div class="feature d">
    &nbsp;</div>
</div>

Новый CSS

*, *:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.container {
    width: 710px;
    height: 710px;
    border: 5px solid black;
    margin: 0px;
    padding: 0px;
}
.feature {
    width: 350px;
    height: 350px;
    padding: 0;
    margin: 0;
    display: inline-block;
    text-align: center;
}
.a {
    background-color: yellow;
    border-bottom: 2px solid steelblue;
    border-right: 2px solid steelblue;
}
.b {
    background-color: red;
    border-bottom: 2px solid steelblue;
    border-left: 2px solid steelblue;
}
.c {
    background-color: blue;
    border-top: 2px solid steelblue;
    border-right: 2px solid steelblue;
}
.d {
    background-color: purple;
    border-top: 2px solid steelblue;
    border-left: 2px solid steelblue;
}

Демо-версия

Использование float: left;

Новый HTML:

<div class="container">
    <div class="feature a"></div>
    <div class="feature b"></div>
    <div class="feature c"></div>
    <div class="feature d"></div>
</div>

Новый CSS:

*, *:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.container {
    width: 710px;
    height: 710px;
    border: 5px solid black;
    margin: 0px;
    padding: 0px;
}
.feature {
    width: 350px;
    height: 350px;
    padding: 0;
    margin: 0;
    float: left;
    text-align: center;
}
.a {
    background-color: yellow;
    border-bottom: 2px solid steelblue;
    border-right: 2px solid steelblue;
}
.b {
    background-color: red;
    border-bottom: 2px solid steelblue;
    border-left: 2px solid steelblue;
}
.c {
    background-color: blue;
    border-top: 2px solid steelblue;
    border-right: 2px solid steelblue;
}
.d {
    background-color: purple;
    border-top: 2px solid steelblue;
    border-left: 2px solid steelblue;
}

Демо-версия

PS - ваши ширины и высоты меняются здесь для непрерывности, но вы можете использовать любые размеры, которые вы хотите, чтобы они соответствовали друг другу.

Поделиться
1 
.feauture {

Должно быть

.feature {
Поделиться
  • 0
    Спасибо. Когда я открываю файл, элементы div находятся друг над другом в отдельной строке. Чтобы иметь 2 встроенных объекта, наибольшая ширина и высота, которую я могу сделать, составляет 346 пикселей, хотя я должен быть в состоянии сделать их каждые 348 пикселей, так как у них нет отступов, полей и границы в 2 пикселя, но только с 2 сторон, и они должны поместите в контейнер div шириной 700px. Когда ширина и высота установлены в 346px, между границами в середине и длиной в 6px имеется промежуток между ними и поле снизу того же размера между 2 div (классами c и d) и контейнером div. Как сделать так, чтобы все границы соприкасались?
  • 0
    @ user1953907 Я предполагаю, что вы хотели спросить меня об этом в моем ответе (отсюда и поздний ответ). Но это легче всего сделать, используя жесткий размер контейнера с мягкими внутренними размерами (проценты). Взгляните на эту скрипку, которую я изменил: jsfiddle.net/5dg4X. Это заставляет .feature использовать float с максимальной шириной 50% (установка ширины на 100%, так что максимально до 50%), поэтому всегда есть 2 на линия и с помощью размера рамки, установленного в рамку-рамку, вы можете установить границы, какие бы большие или маленькие вы не хотели, и размер будет включен в ширину.

Ещё вопросы

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