Простой CSS Tile Layout - PullRequest
Новая
       14

Простой CSS Tile Layout

0 голосов
/ 15 октября 2018

Мне нужен простой способ сделать мой макет из двух плиток для контента в ряд.В настоящее время .cellleft простирается до правого края, поэтому .cellright отображается в следующем ряду. 

div.cellleft{
            background-color: #191a1c;
            margin-top: 40px;
            margin-left: 100px;
            margin-right: 1px;
            padding-top: 1px;
            width: 43%;
        }
        div.cellright{
            background-color: #191a1c;
            margin-top: 40px;
            margin-right: 100px;
            margin-left: 1px;
            padding-top: 1px;
            width: 43%;
        }

изображенная проблема

enter image description here

Ответы [ 3 ]

0 голосов
/ 15 октября 2018

Пожалуйста, попробуйте ниже CSS. 

<!DOCTYPE html>
<html>
<head>
<style>
.box {
    display: inline-block;
    width:40%;
    margin:10px;
}
</style>
</head>
<body>

<div class"row">

  <div class="box">
  some contents here.. this is left cell
  </div>

  <div class="box">
  some contents here... this is right cell
  </div>

</div>

<div class"row">

  <div class="box">
  some contents here.. this is left cell
  </div>

  <div class="box">
  some contents here... this is right cell
  </div>

</div>

<div class"row">

  <div class="box">
  some contents here.. this is left cell
  </div>

  <div class="box">
  some contents here... this is right cell
  </div>

</div>

</body>
</html>
0 голосов
/ 15 октября 2018

я нашел идеальное решение для моего случая: 

.cell {
            width: 50%;
            height: 100%;
            float: left;
        }
        .contentbox{
            background-color: #191a1c;
            margin-top: 40px;
            margin-right: 1px;
            padding-top: 1px;
            margin-left: 50px;
            margin-right: 50px;
        }

<div class="cell">
            <div class="contentbox">
                stuff
            </div>
            <div class="contentbox">
                stuff
            </div>
        </div>
        <div class="cell">
            <div class="contentbox">
                stuff
            </div>
            <div class="contentbox">
                stuff
            </div>
        </div>
0 голосов
/ 15 октября 2018

Чтобы заставить .cellleft идти влево и .cellright идти вправо, попробуйте следующее: 

.cellleft, .cellright {
width: 50%;
float: left;
}

.cellleft {
  background-color: red;
}

.cellright {
  background-color: blue;
}

.clearFloat {
  clear: both;
  }
  
<div class"row">

  <div class="cellleft">
  some contents here.. this is left cell
  </div>
  
  <div class="cellright">
  some contents here... this is right cell
  </div>

</div>

<div class="clearFloat"></div>

<div class"row">

  <div class="cellleft">
  some contents here.. this is left cell
  </div>
  
  <div class="cellright">
  some contents here... this is right cell
  </div>

</div>

<div class="clearFloat"></div>

<div class"row">

  <div class="cellleft">
  some contents here.. this is left cell
  </div>
  
  <div class="cellright">
  some contents here... this is right cell
  </div>

</div>

Используйте поплавок.Вы также можете всплыть вправо .cellright.

Например;Измените свой CSS, float: right для .cellright

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...