Как дать автоматическую ширину для divs внутри внешнего div?

Question

У меня есть дивы

<div id='top' > 
    <div id='top-border' > </div> 
    <div id='top-menu' > <jdoc:include type="modules" name="top-menu" style="well" /></div> 
</div> 

и стиль

#top { 
    width:100%; 
    height:40px; 
    overflow: hidden; 
} 
#top-border { 
    background: url(../images/border.png) repeat-x scroll 0px 18px; 
    position: relative; 
    /*width:74%;*/ 
    height:40px; 
    float:left; 
    overflow: hidden; 
} 
#top-menu { 
    margin:0; 
    float:right; 
    height:40px; 
    padding-top:6px; 
} 

То, что я хочу, чтобы поместить содержимое в верхнем меню, так что будет сокращаться автоматически в зависимости от его содержания. Остальная ширина будет указана на верхнюю границу, которая имеет фоновое изображение. Когда я даю ширину верхней границе, он отлично работает. Но я хочу, чтобы гибкая ширина не была фиксированной. Любая идея?

Answer 1

Вы можете использовать таблицу (ширина: 100%) вместо внешнего div. Замените верхний и верхний пункты меню td. Для верхней границы td используйте css "width: 1px; white-space: nowrap;"

Answer 2

Вы можете использовать свойство CSS word-wrap вместе с width, и вы получите то, что хотите.

Адрес Solution.

HTML-:

<div id="top"> 
    <div id="top-border">abc</div> 
    <div id="op-menu"> <jdoc:include type="modules" name="top-menu" style="well" />def</div> 
</div> 

CSS-:

#top { 
    width:100%; 
    height:40px; 
    overflow: hidden; 
} 
#top-border { 
    background: url(../images/border.png) repeat-x scroll 0px 18px red; 
    position: relative; 
    /*width:74%;*/ 
    height:40px; 
    float:left; 
    overflow: hidden; 
    width: 20px; 
    word-wrap: break-word; 
} 
#top-menu { 
    margin:0; 
    float:right; 
    height:40px; 
    padding-top:6px; 
} 

Я надеюсь, что это помогает.

РЕДАКТИРОВАТЬ

Если ширина должна быть динамическим. Вот Solution.

HTML-:

<div id="top"> 
    <div id="top-border">The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. </div> 
    <div id="op-menu"> <jdoc:include type="modules" name="top-menu" style="well" />def</div> 
</div> 

CSS-:

#top { 
    width:100%; 
    height:40px; 
    overflow: hidden; 
} 
#top-border { 
    background: url(../images/border.png) repeat-x scroll 0px 18px red; 
    position: relative; 
    /*width:74%;*/ 
    height:40px; 
    float:left; 
    overflow: hidden; 
    width: 97%; 
    word-wrap: break-word; 
} 
#top-menu { 
    margin:0; 
    float:right; 
    height:40px; 
    padding-top:6px; 
} 

Я надеюсь, что это помогает в настоящее время.

РЕДАКТИРОВАТЬ - 2

Вот в Solution без определения любой ширины и перемещения окна независимо друг от друга на основе содержания она имеет.

HTML-:

<div id="top"> 
    <div id="top-border">The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. </div> 
    <div id="top-menu"> <jdoc:include type="modules" name="top-menu" style="well" />def</div> 
</div> 

CSS-:

#top { 
    width:100%; 
    height:40px; 
    overflow: hidden; 
    display:table-row; 
} 
#top-border { 
    background: url(../images/border.png) repeat-x scroll 0px 18px red; 
    position: relative; 
    /*width:74%;*/ 
    height:40px; 

    display:table-cell; 
} 
#top-menu { 
    margin:0; 
    height:40px; 
    padding-top:6px; 
    background:green; 
    display:table-cell; 
} 

Надеется, что это помогает сейчас.

Answer 3

Не уверен, правильно ли я понял вопрос, но мне кажется, что div top-border лишний. Не используйте элементы исключительно для презентационных крючков.Вы можете либо установить верхнюю границу в div top-menu, либо заполнить верхнюю часть и фоновое изображение. Как вы уже видели, плавное верхнее меню делает его настолько широким, насколько его содержимое. То же самое произойдет с display: inline-block; или display: table.

EDIT: О, извините, я вижу, что вы просите сейчас. Вот один простой способ, вы можете сделать это без изображения (хотя вы можете использовать изображение тоже): http://codepen.io/pageaffairs/pen/ECFny

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

<style media="all"> 
body {margin: 0; padding: 0;} 

#top { 
    width:100%; 
    overflow: hidden; 
    background: #f7f7f7; 
} 

#top ul { 
    margin:0; 
    list-style: none; 
    float:right; 
    position: relative; 
    padding: 0; 
} 

#top li { 
    margin: 0 0 0 20px; 
    float: left; 
} 

#top li a { 
    display: block; 
    line-height: 40px; 
} 

#top ul:before { 
    content:" "; 
    height: 0; 
    width:999em; 
    right:100%; 
    border-top: 2px dashed #000; 
    position:absolute; 
    top:19px; 
} 

</style> 

</head> 
<body> 

<div id='top'> 
    <ul> 
     <li><a href="">Link 1</a></li> 
     <li><a href="">Link 1</a></li> 
     <li><a href="">Link 1</a></li> 
    </ul> 
</div> 

</body> 
</html> 

Answer 4

вы не можете отобразить DIV только с фоновым изображением, пока не указать некоторую ширину этого элемента или положить некоторое содержание в нем.

Чтобы отобразить # верхней границы div, вам необходимо заполнить его некоторым содержимым или указать некоторую ширину.