Как создать 3 колонки с использованием css без использования сетки (для совместимости ie 10) - PullRequest
Новая
       29

Как создать 3 колонки с использованием css без использования сетки (для совместимости ie 10)

0 голосов
/ 13 января 2020

Как конвертировать следующие HTML, похожие на изображения? Не оборачивайте элементы внутри другого div. Моя цель - изменить положение каждого элемента влево, вправо или вверх, используя только css. Является ли это возможным? 

    <div class="container">
        <div class="left">1</div>
        <div class="left">2</div>
        <div class="left">3</div>
        <div class="left">4</div>
        <div class="right">5</div>
        <div class="center">6</div>
        <main class="main-content"></main>
    </div>

enter image description here

Ответы [ 2 ]

0 голосов
/ 13 января 2020

** EDIT 2 : почти невозможно перемещать элементы аранжировки, используя только HTML и CSS. Возможно, для этого может быть решение, но наиболее эффективным будет использование функции jQuery appendTo ().

Эта статья может быть вам очень полезна: Как переместить элемент в другой элемент?

** РЕДАКТИРОВАТЬ : Я выяснил в последнее время, что вы искали. Я постараюсь найти ответ на ваш вопрос как можно скорее.

Исходя из вашего примера, вы можете добиться этого, создав 3 столбца (в моем коде я использовал div с " столбец " class) и применение display: inline-block; к ним, убедившись, что сумма объединенных столбцов не будет превышать 99%.

The display: inline-block будет пытаться использовать всю ширину родительского контейнера, без содержимого для его переполнения. Если ширина превышает 99%, последний столбец отправляется в следующую строку.

HTML

<div class="column one-fourth">
  <div><p>1.1</p></div>
  <div><p>1.2</p></div>
  <div><p>1.3</p></div>
</div>
<div class="column two-fourth">
  <div><p>2.1</p></div>
  <div><p>2.2</p></div>
</div>
<div class="column one-fourth">
  <div><p>3.1</p></div>
  <div><p>3.2</p></div>
  <div><p>3.3</p></div>
  <div><p>3.4</p></div>
</div>

CSS

.column {
  text-align: center;
  vertical-align: top;
  padding: 10px 0px;
  display: inline-block;
  width: 100%;
}

@media only screen and (min-width: 900px) {
.column.one-fourth { width: 24.75%; }
.column.two-fourth { width: 49.5%; }
}

.column div {
  background: red;
  margin: 10px;
}

.column p {
  color: white;
  font-weight: bold;
  font-size: 50px;
  margin: 0px;
}

Вот код ручки, чтобы увидеть, как это работает: https://codepen.io/ialexandru/pen/NWPzRZj

0 голосов
/ 13 января 2020 

div.container {
  width:100%;
  position:relative;
  height:100%
}
.col {
   min-heght:20px;
   float: left;
}
.col-inner {
  padding: 10px;
  background: gray;
}
.col-60 .col-inner {
  padding: 10px;
  background: blue;
}
.col-20{
  width:20%;
  position:relative;
  line-height: 60px;
   
}
.col-60{
 width:60%;
 position:relative;
 line-height: 60px;
}
.item {
    border: 1px solid;
    margin: 2px;
    text-align: center;
    min-height: 60px;
    border-radius: 5px;
    vertical-align:middle;
    background: #ddd;
}
.main-contain{
  min-height: 200px;
  line-height: 2000px;
}
<div class="container">
<div class="col col-20">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">4</div>
</div>
<div class="col col-60">
<div class="item">6</div>
<div class="item main-contain">main</div>
</div>  
 <div class="col col-20">
  <div class="item">3</div>
    <div class="item">5</div>
 </div> 
</div>
...