Сделайте родительский div с абсолютной позицией берут ширину дочерних div

Question

Сделайте родительский div с абсолютной позицией берут ширину дочерних div

У меня есть следующая структура HTML:

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

Родитель расположен абсолютно, child1 и child2 отображаются бок о бок, используя inline-block. Мне нужно, чтобы все это было отзывчивым, исходя из ширины двух дочерних элементов. проблема в том, что если я увеличу ширину любого из них, ширина родителя останется прежней. Изменение его положения на относительное исправляет это, но я должен иметь это в абсолюте. Есть ли способ заставить его реагировать?

РЕДАКТИРОВАТЬ:

Я надеялся, что это будет просто, но, видимо, не так уж много...:(вот собственно HTML:

<div class="action_container">
    <div class="action_inner">
        <div class="action_title">Format Text</div>
        <div class="action_body">
            <div class="action_args_section"></div>
            <div class="action_output_section"></div>
        </div>
    </div>
</div>

И CSS:

<style>
    .action_container {
        display: block;
        position: absolute;
    }

    .action_inner {
        border: 1px solid black;
    }

    .action_inner {
        min-width: 120px;
        min-height: 50px;
        background-color: white;
        border: 1px solid #666;
        border-radius: 5px;
    }

    .action_title {
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px solid #ccc;
        padding: 3px;
    }

    .action_args_section {
        display: inline-block;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        padding: 3px;
    }

    .action_output_section {
        display: inline-block;
        width: 50px;
        vertical-align: top;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        padding: 3px;
   }
</style>

8

html css responsive-design

Источник

user986494 15 окт '14 в 19:02

8 ответов

Другие вопросы по тегам html css responsive-design

user1587629 09 окт '15 в 14:50 2015-10-09 14:50 · Answer 1 · 2015-10-09 14:50

.parent{

  position: absolute;
  display: table;

}

.child{

  position: relative;
  display: table-cell;

}

Используйте этот трюк, чтобы установить дочерние элементы в одну строку, а родительский - чтобы получить от них ширину. Не применяйте поплавки ни к чему. И помните о пустом месте: Nowrap; если вам нужно сохранить одну строку в дочерних элементах.

Вот скрипка.

user3210868 15 окт '14 в 19:09 2014-10-15 19:09 · Answer 2 · 2014-10-15 19:09

.parent {
    position:absolute;
    height:50px;
    border:1px solid red;
}
.child1 {
    width:100px;
    height:30px;
    border:1px solid green;
}
.child2 {
    width:150px;
    height:30px;
    border:1px solid blue;
}

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

Это то, что вы ищете?

JSFiddle

3

Источник

user3210868 15 окт '14 в 19:09

user3087839 15 окт '14 в 19:15 2014-10-15 19:15 · Answer 3 · 2014-10-15 19:15

.parent{
            position:absolute;
            left : 60px;
            top : 60px;
            width : auto;
            height:auto;
            border:1px solid black;
        }
        .parent .child{
            display:inline-block;
            border:1px solid blue;
        }

<div class="parent">
    <div class="child">aaaaaassssssssssssss</div>
    <div class="child">sssssssccccccccccccccccccc</div>
</div>

0

Источник

user3087839 15 окт '14 в 19:15

user2934155 15 окт '14 в 19:15 2014-10-15 19:15 · Answer 4 · 2014-10-15 19:15

Попробуйте использовать максимальную ширину, чтобы установить максимальную ширину для родительского элемента div, чтобы он не стал шире указанного.

0

Источник

user2934155 15 окт '14 в 19:15

user3287761 15 окт '14 в 19:16 2014-10-15 19:16 · Answer 5 · 2014-10-15 19:16

Я сделал это легко. Изменение ширины div также меняет родителя.

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

<style>

div{border:1px solid black;}

.parent{

position:absolute;
width:auto;
height:auto;
}

.child1{
display:inline-block;
width:40px;
height:40px;
}

.child2{
display:inline-block;
width:30px;
height:40px;
}

</style>

0

Источник

user3287761 15 окт '14 в 19:16

user2278429 15 окт '14 в 19:17 2014-10-15 19:17 · Answer 6 · 2014-10-15 19:17

Если вы хотите адаптивный дизайн, убедитесь, что вы используете проценты, а не значения в пикселях, потому что размер div будет рассчитываться по ширине области просмотра.

Если вы просто хотите, чтобы размер родительского элемента изменялся в зависимости от абсолютных размеров дочерних элементов div, добавьте height:auto; width:auto к родителю. Затем измените дочерние элементы div на display:block; float:left, Родитель изменит размер соответственно.

Обновленная демонстрация CodePen

CSS

.action_container {
    display: block;
    position: absolute;
    height:auto;
    width:auto;
}
.action_inner {
    border: 1px solid black;
}
.action_inner {
    min-width: 120px;
    min-height: 50px;
    background-color: white;
    border: 1px solid #666;
    border-radius: 5px;
}
.action_title {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding: 3px;
}
.action_args_section {
    display: block;
    float:left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 3px;
    width:300px;
    border: 1px solid red;
}
.action_output_section {
    display: block;
    float:left;
    width: 150px;
    vertical-align: top;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 3px;
    border: 1px solid blue;
}

user4057014 15 окт '14 в 19:10 2014-10-15 19:10 · Answer 7 · 2014-10-15 19:10

См. пример решения здесь в ссылке jsfiddle

используя эту CSS:

.parent{
    position:fixed;
    background-color:blue;
    height:auto;
    width:auto;
}
.child1{width:200px;background-color:black;height:200px;float:left;}
.child2{width:200px;background-color:red;height:200px; float:left;}

если это не то, что вы ищете, вы можете отредактировать свой CSS здесь, тогда мы можем помочь

user4125709 15 окт '14 в 19:20 2014-10-15 19:20 · Answer 8 · 2014-10-15 19:20

.parent{
  float: left;
  posetion: absolute;
background-color: yellow;
  width:auto;
  height: auto;
}
.parent div{
  float: left;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  }

<div class="parent">
    <div class="child1">this</div>
    <div class="child2">this</div>
</div>

Вот код, который вам нужен:)

-2

Источник

user4125709 15 окт '14 в 19:20