Расположение столбцов без фиксированной ширины

Я хочу сделать что-то действительно базовое - расположение двух столбцов, где ширина левого столбца определяется содержимым (которое всегда мало), а правый столбец занимает оставшуюся ширину.Расположение столбцов без фиксированной ширины

Полный пример на http://jsfiddle.net/EzHVX/2/, но в основном у меня есть HTML следующим образом ::

<div class="left"> 
    <div class="badge">all 15</div>  
</div> 

<div class="right"> 
    <div class="badge">...</div> 
    <div class="badge">...</div>  
    .... 
</div>

и существенной частью CSS просто ::

.left { 
    float: left; 
}  

.right { 
    float: left; 
    width: 400px; 
}

Без явной ширины, в правой колонке начинает обтекать левый столбец, чего я не хочу. Но я также не хочу использовать явную ширину. И CSS не поддерживает «100% - 10em» как ширину. И даже если бы это поддерживало, я бы предпочел не жестко кодировать «10em». Итак, какие у меня варианты?

источник

2013-05-07 Vladimir Prus

overflow:hidden; в правой DIV будет выполнять работу

обновил ссылку вы дали пожалуйста, дайте знать, если это работает для вас

http://jsfiddle.net/EzHVX/4/

источник

2013-05-07 05:51:24

Вы должны опубликовать свой [jsFiddle] (http://jsfiddle.net/EzHVX/4/), тогда это аккуратное решение :) –

благодаря обновлению по ссылке –

Спасибо, это работает так же, как и Я хотел. Я просмотрел документы для «переполнения» и, честно говоря, не могу понять, почему это помогает. Я, хотя это только определяет, что происходит с контентом, когда он уже слишком большой для контейнера. Так в чем тут волшебство? –

Вы могли бы использовать некоторые свойства таблицы макета CSS для достижения этой цели, работает вниз в том числе и IE8:

jsFiddle

body > div { 
    display: table-row; 
    width: 100%; 
} 
.badge { 
    background-color: #468847; 
    border-radius: 9px; 
    padding: 2px 9px; 
    color: #ffffff; 
    width: auto; 
    display: inline-block; 
    margin: 6px; 
    white-space: nowrap; 
} 
.left { 
    display: table-cell; 
} 
.right { 
    display: table-cell; 
}

источник

2013-05-07 05:51:38

Вы можете использовать Flex макета для реализации (старше IE не поддерживает это.)

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;  /* OLD - Firefox 19- (buggy but mostly works) */  
    display: -ms-flexbox; /* TWEENER - IE 10 */ 
    display: -webkit-flex; /* NEW - Chrome */ 
    display: flex;   /* NEW, Spec - Opera 12.1, Firefox 20+ */

пример: http://jsfiddle.net/EzHVX/7/

источник

2013-05-07 06:04:52

HTML-

<div class="parent"> 
    <div class="left"> 
    <div class="badge">all 15</div>  
    </div> 

    <div class="right"> 
    <div class="badge">...</div> 
    <div class="badge">...</div>  
    .... 
    </div> 
    <div class="clear"></div> 
</div>

CSS-:

.parent{ 
    widht: 100%; 
    clear:both; 
} 
.clear{ 
    clear:both; 
} 
.left { 
    float: left; 
}  

.right { 
    float: left; 
}

JQuery

$(document).ready(function(){ 
    var parent_width= $('.parent').width(); 
    var left_width= $('.left').width(); 
    var right_width = parseInt(parent_width) - parseInt(left_width); 
    $('.right').css('max-width',right_width); 

});

источник

2013-05-07 06:20:20

Расположение столбцов без фиксированной ширины

ответ

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