2

Всем привет, верстаю шаблон, в нём есть "корневой div"(id:indexRootOut) который должен растягиваться на всю ширину экрана, внутри есть два div'a id:indexTopRow1 и id:indexTopRow2, div id:indexTopRow1 содержит три элемента : лого, поиск и две кнопки(вход и рега). При слишком узком экране, все элементы сжимаются до минимальной ширины(у id:indexRootOut min-width: 800px), а при широком экране - растягиваются до максимальной(у id:indexTopInn max-width: 1280px). Всё работает нормально когда экран достаточно широкий, но когда ширина экрана меньше минимальной(800px) то получается вот это :

введите сюда описание изображения

Flex'ами пробовал, результат аналогичный, div id:indexTopUserMenuOut должен изменять свою ширину в зависимости от ширины кнопок(т.к. на разных языках длина слов "вход" и "рега" будет отличаться)

<!doctype html>
<html lang="ru">
<head>
<base href="/" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#c21616" />
<meta name="Description" content="">
<title></title>

</head>
<body>

<div id="indexRootOut">
<div id="indexRootInn">

<div id="indexTopOut" style="background-color: #c21616;">
<div id="indexTopInn">

<div id="indexTopRow1">
<div id="indexTopLogo"><a href=""></a></div><!--indexTopLogo/-->

<div id="indexTopFindOut">
<input id="indexTopFindHTMLInput" type="text" value="">
<div id="indexTopFindHTMLButt" class="HTMLButt indexTopButt">найти</div>
</div><!--indexTopFindOut/-->

<div id="indexTopUserMenuOut"><!--
--><div class="HTMLButt indexTopButt" style="border-radius: 25px 0px 0px 25px;">вход</div><!--
--><div class="HTMLButt indexTopButt" style="border-radius: 0px 25px 25px 0px; border-left-width: 0px;">регистрация</div>
</div><!--indexTopUserMenuOut/-->
</div><!--indexTopRow1/-->

<div style="height: 26px;"></div><!--delim-->

<div id="indexTopRow2">
<div id="indexTopMenuOut">

<div class="indexTopMenuElem indexTopMenuActElem"><a href="">Популярное</a><div>Популярное</div></div><!--/indexTopMenuElem-->

<div class="indexTopMenuElem"><a href="">Все категории</a><div>Все категории</div></div><!--/indexTopMenuElem-->

<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->

<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->

<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->

<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->

<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->

<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->

<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->

<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->

<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->

</div><!--indexTopMenuOut/-->
</div><!--indexTopRow2/-->

</div><!--indexTopInn/-->
</div><!--indexTopOut/-->




</div><!--indexRootInn/-->
</div><!--indexRootOut/-->

</body>
</html>

https://jsfiddle.net/apd4q5kc/2/

1
  • Сделайте width auto для кнопки, и она будет длинной в текст. Ну а чтобы смотрелось нормально на 800px используйте @media на css 21 апр 2019 в 8:52

1 ответ 1

1
#indexTopFindOut {

    display: table-cell;
    position: relative;
    min-width: auto;

    padding-right: 30px;

}

https://jsfiddle.net/3c17ua9t/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.