2

Доброго времени суток, встала следующая задача:

Есть макет

<div class="sidebar">
    <div class="menu">
        текст
    </div>
    <div class="ads">
         <img/>
    </div>
</div>

необходимо средствами css (без js) сделать так, чтобы ширина блока "sidebar" подгонялась под ширину текста в "menu", и размер картинки в "ads" был равен всей ширине "sidebar", т.е. ширине текста

2 ответа 2

1

img{ 
  max-width: 100%;
  width: 100%;
}
.sidebar { 
    display: inline-table; 
    background: #c7c7c7;
}
.menu {
    background: #f9f9f9;
    padding: 5px;
}
.ads {
   display: table-caption;
}
<div class="sidebar">
    <div class="menu">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
    </div>
    <div class="ads">
         <img src="http://2017newyear.ru/wp-content/uploads/2016/09/novyj_god.png"/>
    </div>
</div>

3
  • В это случае картинка получается больше текста, есть текст короткий. А она должна по ширине быть как текст.
    – Денис
    12 дек 2017 в 4:05
  • @Денис Обновил, но тут минус текст ниже картинки получается) 12 дек 2017 в 4:06
  • а как тепеть текст наверх вынести?)
    – Денис
    12 дек 2017 в 4:10
1

Вам понадобится свойство min-content для обертки, width: 100% для изображения и white-space: nowrap для меню.

.sidebar {
  border: 1px solid;
  padding: 1px;
  width: min-content;
}

.sidebar + .sidebar {
  margin-top: 2em;
}

.menu {
  border: 1px solid green;
  margin-bottom: 1px;
  white-space: nowrap;
  padding: 2px 5px;
}

.ads {
  border: 1px solid grey;
}

.ads img {
  display: block;
  width: 100%;
}
<div class="sidebar">
  <div class="menu">
    короткий текст
  </div>
  <div class="ads">
    <img src="http://via.placeholder.com/350x150" />
  </div>
</div>

<div class="sidebar">
  <div class="menu">
    текст, который немного длиннее предыдущего, и больше, чем картинка в длину
  </div>
  <div class="ads">
    <img src="http://via.placeholder.com/350x150" />
  </div>
</div>

2
  • А теперь загляните сюда :)
    – user206435
    12 дек 2017 в 15:27
  • @Birdy это моя любимая страница. 12 дек 2017 в 15:29

Ваш ответ

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

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