Div гнездо структуры

Я столкнулся с проблемой, что я не знаю, где это неправильно. мой код здесь:Div гнездо структуры

<html> 
<head> 
<style type="text/css"> 
#top{ 
    width:100%; 
    height: 78%; 
    background-color: #ccc; 
} 

#left{ 
    width: 45%; 
    height: 100%; 
    display: inline-block; 
    background-color: green; 
} 
#right{ 
    width:50%; 
    height: 100%; 
    display: inline-block; 
    background-color: pink;} 
</style> 
</head> 
<body> 
    <div id="top"> 
     <div id="left"> 
     <div id="inside">asd</div> 
     </div> 
    <div id="right"></div> 
    </div> 
</body> 
</html>

, если я ничего не добавляют к «внутри» DIV, то макет будет хорошо, так же, как это: enter image description here

но если я добавить любой тег или даже несколько слова в «внутреннем» dev. макет ошибося. enter image description here

Я новичок в HTML, так что я не знаю проблемы, кто может сказать мне, почему это происходит? Я с ума !!! помочь ~~~~ :(

источник

2013-07-22 cjmandlulu

+1 для презентации - образец кода, изображения, конкретный вопрос - хорошо. – Ben

http://jsfiddle.net/2nRKw/1/ – falguni

у вас возникли проблемы с block и inline. Когда появится текст, браузер помещает внутри div в block дисплей, который разрушает inline стиль . Я не уверен, если есть отличный способ вокруг этого с помощью inline-block - вы должны будете использовать float, я считаю

Вот float решение применяется к разметке:

<html> 
<head> 
<style type="text/css"> 
#top { 
    width:100%; 
    height: 78%; 
    background-color: #ccc; 
} 

#left { 
    background:green; 
    float:left; 
    height:100%; 
    width:45%; 
} 

#right { 
    background:pink; 
    height:100%; 
    margin-left:45%; 
    width:50%; 
} 
</style> 
</head> 
<body> 
    <div id="top"> 
     <div id="left"> 
     <div id="inside">asdf</div> 
     </div> 

    <div id="right"></div> 
    </div> 
</body> 
</html>

Кроме того, будьте осторожны с CSS height. Это - головная боль, ожидающая случиться.

источник

2013-07-22 07:35:54 Ben

Кажется, единственный способ, которым я могу это сделать, - использовать float, у меня все еще есть вопрос, почему я добавляю отображение: inline-block to "inside", ничего не происходит? – cjmandlulu

Я думаю, это потому, что у вас есть 'block' в' inline'. Вещи, которые являются 'inline' (или, по-видимому,' inline-block'), не должны иметь в них 'block'. Блок является верхним уровнем, так как он заставляет разрывы строк и заполняет ширину контейнера. 'inline' просто сортируется там. Поэтому 'block' в' inline' просит проблемы - и вы его получили. :) – Ben

вы действительно мне очень помогли ~ Я думаю, что я должен найти несколько книг о css, чтобы узнать дальнейшие вещи ~ спасибо за вашу помощь :) – cjmandlulu

попробовать это:

#right{ 
width:50%; 
height: 100%; 
display: inline-block; 
background-color: pink; 
float:right;}

demo

источник

2013-07-22 07:37:18

да, я пробую это и обнаруживаю, что только float может решить мою проблему – cjmandlulu

Обратите внимание, что отображение: inline-block переопределяется float: left, поэтому вы можете удалить его. – Ben

есть также способ, чтобы получить его, давая float к элементу

#left { 
    width: 45%; 
    height: 100%; 
/* display: inline-block; */ 
    background-color: green; 
    float: left; 
}

источник

2013-07-22 07:37:34 Pumpkinpro

Вы правы ~ спасибо ~ :) – cjmandlulu

Обратите внимание, что 'display: inline-block' переопределяется' float: left', поэтому вы можете удалить его. – Ben

Вы можете решить эту проблему путем добавления атрибута поплавка в CSS.

Найти обновленный шаблон HTML ниже

<html> 
<head> 
<style type="text/css"> 
#top{ 
    width:100%; 
    height: 78%; 
    background-color: #ccc; 
} 

#left{ 
    width: 45%; 
    height: 100%; 
float: left; 
    background-color: green; 
} 
#right{ 
    width: 50%; 
    height: 100%; 
float: left; 
    background-color: pink;} 
</style> 
</head> 
<body> 
    <div id="top"> 
     <div id="left"> 
     <div id="inside">test new</div> 
     </div> 
    <div id="right">test</div> 
    </div> 
</body> 
</html>

источник

2013-07-22 07:40:42 nvn

Я Recommand вам Twitter Bootstrap для оформления вашего дел. Использование их лист CSS.

<div id=top class=row-fluid> 
<div id=right class=span6><div> 
<div id=left class=span6><div> 
</div>

Размещение блока проще, чем при использовании встроенного блока. Все, что вам нужно, чтобы получить то, что вы показываете в примере, это добавить цвет фона. И плавать легко становится трудно справиться.

источник

2013-07-22 07:45:59 user1820801

Вы можете использовать float (см. Другие ответы), но вам не обязательно, если вы этого не хотите.

#left, #right { vertical-align:top; }

получит то, что вы хотите.

стороне: Вы должны добавить <!DOCTYPE html> в верхней части страницы.В этом случае вам также необходимо будет добавить

html, body { height: 100% }

в ваш CSS.

источник

2013-07-22 07:48:11 Alohci

+1 Ха - это тоже работает. Мне было интересно, есть ли способ держать 'inline-block' вокруг ... – Ben

Div гнездо структуры

ответ

Смежные вопросы