Сделать дочерние divs расширенными и сжать внутри родителя

Question

У меня есть верхняя панель страниц, и я хотел бы сделать ширину каждой «кнопки» (.contain) развернуть или сжать, когда браузер станет больше или меньше.

Я видел очень хорошее решение для этого, которое использовало поплавок, но в моем случае это не работает, потому что добавление этого приводит к тому, что кнопки перестают отображаться бок о бок; что я решил с помощью встроенного блока.

Мне нужен способ одновременно держать кнопки бок о бок и настраивать их ширину с помощью окна браузера. Какие-либо предложения? Мой код выглядит следующим образом:

#topbar { 
 
    width: 100%; 
 
    height: 38px; 
 
    border-bottom: 1px solid #e2c4ff; 
 
    position: fixed; 
 
    z-index: 10; 
 
    top: 0px; 
 
    left: 0px; 
 
    text-align: center; 
 
} 
 

 
.toppage { 
 
    white-space: nowrap; 
 
    position: absolute; 
 
    left: 0%; 
 
    top: 50%; 
 
    transform: translate(0%, -50%); 
 
} 
 

 
.contain { 
 
    display: inline-block; 
 
    white-space: normal; 
 
    padding-left: 12px; 
 
    padding-right: 12px; 
 
    height: 38px; 
 
    background-color: #fff; 
 
    border-right: 1px solid #e2c4ff; 
 
}

<div id="topbar"> 
 
    <div class="toppage"> 
 
    <div class="contain">hello</div> 
 
    <div class="contain">goodbye</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <!----> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    </div> 
 
</div>

Answer 1

Не используйте position: absolute для .toppage. Для .contain используйте некоторую ширину в процентах. Он должен работать.

Answer 2

Я решил обосноваться на этом: http://www.w3schools.com/css/css_navbar.asp. Это не совсем то, о чем я думал, но он выглядит очень чистым, а код более аккуратным, чем у меня.

Answer 3

Я считаю, что если вы дадите display: flex; justify-content: center;width: 100%;.toppage, это сработает.

Answer 4

Сокращение контейнера полезно до тех пор, пока содержимое (текст, в вашем случае) внутри него не исчезнет. Вы можете использовать Media Queries для создания гибких контейнеров, но текст внутри останется прежним. Поэтому, когда размер страницы уменьшается, контейнер сползает вниз, так как текст внутри имеет одинаковый размер размер шрифта.

Как я придумал, эта проблема может быть решена двумя способами:

1: Жесткий код CSS медиа-запросы, чтобы изменить размер шрифта

Это потребует много и вам придется использовать многие правила @media, чтобы это исправить. Используйте это, только если вы не хотите включать script на свою страницу.

2: Использование JavaScript для обработки размер шрифта

Это лучшее решение, которое я могу думать. Вы можете использовать JS (я использую jQuery) для изменения размера шрифта в вашем contain div. Хотя этот метод также требует небольшого жесткого кодирования. Вот пример кода:

HTML:

<div id="container"> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
</div> 

Имейте в виду: При изменении размера шрифта любого текста на 1px, все символы, составляющие текста увеличивается на 1px в размере.Поэтому:

JavaScript:

$(document).ready(function() { 
    $(window).resize(function() { 
     var window_width = $(window).width(); 
     var contain_count = 10*6; // 10 contain elements * 6 characters of text 'button' 
     var ratio = window_width/contain_count; 
     $('.contain').css('font-size',ratio+'px') 
    }); 
}); 

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