#html #css
#HTML #css
Вопрос:
У меня следующая настройка:
<div id="container">
<div id="msg"><p>Lorem ipsum dolor sit amet.</p></div>
<div id="img"><div id="content"></div></div>
</div>
#container{
position:absolute;
width:182px;
height:60px;
}
#msg{
width:95px;
height:60px;
float:left;
display: table;
background:#666;
}
#msg p{
font-size:13px;
color:#eee;
text-align: center;
vertical-align: middle;
display: table-cell;
}
#img{
width:87px;
height:60px;
float:right;
background:#333;
}
#content{
position:absolute;
top:7px;
width:80px;
height:45px;
background:#ccc;
}
Я хочу, чтобы, когда div img скрывался (отображение: отсутствует), div msg получал 100% ширину родительского элемента. Но текст должен оставаться центрированным.
Комментарии:
1. Это то, что он делает.. jsfiddle.net/ELKQg/802
2. ваш вопрос не делает sense…as заявлено @Adelphia, вы задаете вопрос, чтобы достичь чего-то, чего вы уже достигли
3. Я почти уверен, что вы можете достичь того, чего хотите, с помощью flexbox . Нет необходимости в сумасшедшем отображении: таблица…
4. @gtramontina отображение: таблица, если она хорошо используется здесь, эффективна и охватывает гораздо больше браузеров, чем flexbox 🙂 jsfiddle.net/ELKQg/804
5. Да, но когда img становится скрытым, ширина сообщения должна оставаться шириной родительского контейнера (ширина: 182px). Я сказал в своем первоначальном сообщении: я хочу, чтобы, когда div img скрывается (display: none), div msg получает 100% ширину родительского элемента.
Ответ №1:
Display:table; — хорошая идея, но это правило должно быть отправлено в основной контейнер и два его дочерних элемента, чтобы быть эффективным для достижения вашей цели.
Наведите указатель мыши на демонстрацию, чтобы скрыть #img и увидеть #msg заполнение по всей ширине #container :
#container {
display:table;
width:182px;
height:60px;
}
#msg {
width:95px;
display: table-cell;
vertical-align: middle;
background:#666;
text-align: center;
}
#msg p {
font-size:13px;
color:#eee;
}
#img {
width:87px;
vertical-align:middle;
display: table-cell;
background:#333;
}
#container:hover #img {
display:none;
}
#content {
width:80px;
height:45px;
background:#ccc;
}
Комментарии:
1. Возможно ли иметь что-то другое, кроме таблицы, в родительском контейнере?
2. display:flex; но тогда можно использовать display:table в качестве запасного варианта. в любом случае, чтобы установить выравнивание по вертикали, float не должен использоваться.
Ответ №2:
Я предполагаю, что изменение ширины сообщения может выполнить эту работу:
$("#msg").on('click', function(){
$("#img").css('display', 'none');
$("#msg").css('width', '100%');
});
Ответ №3:
Привет, это возможно с помощью jquery.Я добавил скрипт, который решит эту проблему. Для тестирования я добавил display:none; в #img id.
<style type="text/css" >
#container{
position:absolute;
width:182px;
height:60px;
}
#msg{
width:95px;
height:60px;
float:left;
display: table;
background:#666;
}
#msg p{
font-size:13px;
color:#eee;
text-align: center;
vertical-align: middle;
display: table-cell;
}
#img{
width:87px;
height:60px;
float:right;
background:#333;
display:none;
}
#content{
position:absolute;
top:7px;
width:80px;
height:45px;
background:#ccc;
}
.w100{
width:100% !important;
}
</style>
<div id="container">
<div id="msg"><p>Lorem ipsum dolor sit amet.</p></div>
<div id="img"><div id="content"></div></div>
</div>
<script language="javascript" >
if ($('#img').css('display') == 'none') {
$( "#msg" ).addClass( "w100" );
}
</script>
Комментарии:
1. Вы можете добавить дополнительную разметку, если это необходимо, я просто хотел бы, чтобы это можно было сделать с помощью чистого css.
2. привет @Toniq я опубликовал другое решение, которое будет работать без jquery. пожалуйста, проверьте его.
Ответ №4:
Вот еще одно решение, которое будет работать без jquery, но вам нужно изменить структуру.
<style type="text/css" >
#container{
position:absolute;
width:182px;
height:60px;
}
#msg{
width:100%;
height:60px;
float:left;
display: table;
background:#666;
}
#msg p{
font-size:13px;
color:#eee;
text-align: center;
vertical-align: middle;
display: table-cell;
}
#img{
width:87px;
height:60px;
float:right;
background:#333;
display:none;
}
#content{
position:absolute;
top:7px;
width:80px;
height:45px;
background:#ccc;
}
</style>
<div id="container">
<div id="msg">
<p>Lorem ipsum dolor sit amet.</p>
<div id="img"><div id="content"></div></div>
</div>
</div>