Как настроить ширину дочернего элемента без корректировки ширины родительского элемента в CSS?

Question

У меня есть следующий:

<div class="parent"> 
    <div class="sizer" /> 
    <div class="child" /> 
</div> 

.sizer { 
width: 200px; 
} 

.child { 
position: relative; 
width: 400px; 
} 

Я не позволил точно установить ширину на родителе, и я не позволил установить ребенок position:absolute.

Использование CSS, есть ли другой способ установить ширину .child на 400 без ширины .parent от 200 до 400?

Answer 1

Если родитель имеет ширину набора, он не будет расширяться с шириной дочернего элемента, даже если ширина дочернего элемента превышает ширину родителя. См. this JS Fiddle example.

.parent { 
    width: 300px; 
    height: 50px; 
} 

.child { 
    width: 400px; 
    height: 50px; 
    position: relative; 

} 

---

UPDATE

Я интересно, если есть какой-либо вид хака, что позволяет мне сделать это без установки ширины на родителя

Существует n o способ выполнить это без того, чтобы родитель имел какое-то свойство ширины или ширины. Если вы выступаете против использования свойства width родителя, вы можете использовать несколько альтернатив ширины.

Как пояснил cimmanon в комментарии ниже, вы можете установить .parent, чтобы иметь max-width. Это необязательно должно быть 100%; любая максимальная ширина будет делать, если она меньше ширины дочернего элемента. See this JS Fiddle example или проверить этот код:

.parent { 
    max-width: 200px; 
} 

.child { 
    width: 400px; 
} 

В качестве альтернативы можно использовать position:absolute и установить left и right свойства. See this JS Fiddle example или проверить этот код:

.parent { 
    position:absolute; 
    left:0; 
    right:0; 
} 

Но помните, что это только два из множества возможных альтернатив. Надеюсь это поможет!

Answer 2

Вы можете установить максимальную ширину родителя на 100%.

http://jsfiddle.net/aFdzy/

.parent { 
    max-width: 100%; 
} 

.child { 
    width: 400%; 
}