align content-div element внутри wrapper-div

Я изо всех сил старался выровнять элементы content-div оболочки-div, используя только CSS со следующим ограничением.align content-div element внутри wrapper-div

Обертка DIV может иметь строку, которая позволяет несколько элементов контента DIV быть на строке
В лучшем случае 4-контент DIV элементов могут существовать на ряде оберточных дел.
Элементы content-div последней строки должны быть расширены, чтобы заполнить строку. (например, если в последней строке присутствуют 3 элемента content-div, то ширина каждого содержимого-div должна составлять 33,3%)
Выбирается только один элемент контента, а выбранный элемент должен быть нижним левым conner элемента wrapper-div.

Чтобы справиться с этим, я попробовал следующий css.

.wrapper{ 
    width:100%; 
} 
.content{ 
    max-width:100%; 
    min-width:25%; 
    background-color:white; 
    float:right; 
} 
.content.selected{ 
    position:absolute; 
    top:100%; 
    left:0; 
    float:left; 
    background-color:yellow; 
}

Я думал, что "плавать: право; флоат: левая позиция: абсолютная; верхний: 100%; слева: 0;" опция может обрабатывать ограничение 1 и ограничение 4, опция «min-width: 25%» может обрабатывать ограничение 2, а опция «max-width: 100%» может обрабатывать ограничение 3. Однако только несколько ограничений были выполнены через CSS.

У меня есть настройки jsFiddle пример: https://jsfiddle.net/6qyc5kLw/2/

Я бы помочь в этом отношении.

This image is what I want to do.

источник

2016-03-16 Hyunwoong Ji

Спасибо всем! Я полностью решил проблему. Я очень ценю это! –

когда-либо рассматривали дисплей: сгибать? это огромная!

.wrapper{ 
    width:100%; 
    position:relative; 
    display: flex; 
    flex-flow:row wrap; 
    align-items: stretch; 
} 
.content{ 

    min-width:25%; 
    background-color:white; 
    //float:right; 
    flex:1; 

    order:1; 
} 
.content.selected{ 
    //position:absolute; 
    //top:100%; 
    //left:0; 
    //float:left; 
    background-color:yellow; 
    order:-1; 
}

источник

2016-03-16 10:58:30 Fynn

Новые возможности flexbox - это, безусловно, то, что вы ищете. Ниже приведен фрагмент или https://jsfiddle.net/6qyc5kLw/3/ для обновленной демонстрации с некоторыми базовыми свойствами flexbox. Еще один будет

flex-order (to reverse the order of elements in first row)

.wrapper{ 
 
     width:100%; 
 
     position:relative; 
 
     display: flex; 
 
     justify-content: space-between; 
 
     flex-wrap: wrap; 
 
    } 
 
    .content{ 
 
     flex-basis: 25%; 
 
     background-color:white; 
 
     border: 1px solid #ccc; 
 
     flex-grow: 1; 
 
     box-sizing: border-box; 
 
    } 
 
    .content.selected{ 
 
     align-self: flex-end; 
 
     background-color:yellow; 
 
    }

<body> 
 
    <div class="wrapper"> 
 
    <div class="content"> 
 
     1 
 
    </div> 
 
    <div class="content"> 
 
     2 
 
    </div> 
 
    <div class="content"> 
 
     3 
 
    </div> 
 
    <div class="content"> 
 
     4 
 
    </div> 
 
    <div class="content selected"> 
 
     5 
 
    </div> 
 
    <div class="content"> 
 
     6 
 
    </div> 
 
    <div class="content"> 
 
     7 
 
    </div> 
 
    </div> 
 
</body>

источник

2016-03-16 11:01:07 Paul

Вы можете использовать дисплей: Flex

.wrapper{ 
 
    width:100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
} 
 
.content{ 
 
    background:#fff; 
 
    box-flex: 1; 
 
    min-width:25%; 
 
    flex: 1; 
 
    margin: auto; 
 
} 
 
.content.selected{ 
 
    background-color:yellow; 
 
}

<div class="wrapper"> 
 
    <div class="content">1</div> 
 
    <div class="content">2</div> 
 
    <div class="content">3</div> 
 
    <div class="content">4</div> 
 
    <div class="content selected">5</div> 
 
    <div class="content">6</div> 
 
    <div class="content">7</div> 
 
</div>

источник

2016-03-16 11:03:20 xxxmatko

Вот именно то, что вы хотите в примере изображения:

.wrapper{ 
 
     width:100%; 
 
     position:relative; 
 
    } 
 
    .content{ 
 
     max-width:100%; 
 
     min-width:25%; 
 
     background-color:white; 
 
     float:right; 
 
     border: 1px solid black; 
 
     box-sizing: border-box; 
 
    } 
 
    .content.selected{ 
 
     background-color:yellow; 
 
     float: left; 
 
     width: 33.33%; 
 
    } 
 

 
.content:nth-child(6) { 
 
    float: right; 
 
    width: 33.33%; 
 
} 
 

 
.content:nth-child(7) { 
 
    float: left; 
 
    width: 33.33%; 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <div class="content"> 
 
     1 
 
    </div> 
 
    <div class="content"> 
 
     2 
 
    </div> 
 
    <div class="content"> 
 
     3 
 
    </div> 
 
    <div class="content"> 
 
     4 
 
    </div> 
 
    <div class="content selected"> 
 
     5 
 
    </div> 
 
    <div class="content"> 
 
     6 
 
    </div> 
 
    <div class="content"> 
 
     7 
 
    </div> 
 
    </div> 
 
</body>

источник

2016-03-16 11:04:01 Pedram

align content-div element внутри wrapper-div

ответ

Смежные вопросы