在两列页面上显示不同高度的HTML块（事先未知）

时间：2016-12-02 08:25:36

标签： html css position css-position

由于图片通常比文字更好，这里是我想要实现的图式：

enter image description here

所以，我尝试做的是在页面的右半部分或左半部分放置一些文本块。但是，我事先并不知道每个街区的高度;我所知道的是它们的宽度（约占总屏幕宽度的45％）

第一个元素必须位于页面的右半部分，因为静态元素已经在左半边。但是，根据块编号1的高度，如果有空间，则第二个块必须在左侧，否则在右侧。 每个块都由部分视图加载（我使用ASP.NET MVC）

我绝对不知道如何实现这一点，但是，这是我尝试的：     

<div style="width:45%; display: inline-block">
    // My static element hard-coded
</div>

<div style="width:45%; display: inline-block">
    // My blocks
</div>

但是我怀疑这个HTML结构是好的，因为元素只会在45％右边加载。

有关信息，中间分隔符的样式为：

.middle-separator {
    width: 1px;
    background: #aaa;
    position: absolute;
    top: 30px;
    left: 50%;
    bottom: 0;

我也尝试使用Bootstrap和col-sm-4玩我的积木，但它不起作用，而Element 3，例如，不仅仅是在Element 1之后，而是更低。
此外，我更愿意避免使用<table>并仅使用CSS实现此目的。这是个人项目，我想做得好。

4 个答案:

答案 0 :(得分：1)

一些CSS 

.card-columns {
    /*Set the column-count to how many columns you want
     *Set the column-gap to ajust the space between the cards
     */
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem
}
.card-columns .card {
    display: inline-block;
    width: 100 %
}

一些HTML 

<div class="card-columns">
    <div class="card"></div><!--duplicate this div and add the content for that card to it-->
</div>
  

礼貌：bootstrap CSS

答案 1 :(得分：1)

http://codepen.io/dominicgan/pen/dOJQPY/

<强> CSS 

.elem {
  background: #eee;
  border: solid 1px #ccc;
  margin: 10px;
  padding: 10px;
  width: calc(45% - 20px);
}

<强> JS 

var elem = document.querySelector('.elem__wrapper');

var msnry = new Masonry(elem, {
  // options
  itemSelector: '.elem'
});

如果您不介意某些j，masonry库可以很好地处理这个问题。否则，css列与@Luuk所写的一样有效。

答案 2 :(得分：0)

检查一下。硬编码。我使用padding作为动态元素和div名为static的修复高度，并将每个div与您提供的图像完全相同。如果我弄错了，请发表评论。

body {
  margin: 0;
}

.column1, .column2 {
  width: 45%;
}
.column1 > div, .column2 > div{
  border: 2px solid black;
  display: block;
  margin-bottom: 15px;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
}
.column2{
  position: absolute; 
  top: 0;
  right: 0;
}
.static {
  height: 100px;
}

.element1 {
  padding: 100px 0 100px 0;

}

.element2 {
  padding: 150px 0 150px 0;
}

.element3 {
  padding: 35px 0 35px 0;
 
}

.element4 {
  padding: 25px 0 25px 0;

}

.element5 {
  padding: 45px 0 35px 0;
}

.element6 {
  padding: 40px 0 40px 0;
}

.divider {
  position: absolute;
  height: 95%;
  width: 3px;
  background: black;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
<div class="column1">
  <div class="static">
    static
  </div>

  <div class="element2">
    element2
  </div>

  <div class="element6">
    element6
  </div>
</div>
<div class="column2">
  <div class="element1">
    element1
  </div>
  <div class="element3">
    element3
  </div>
  <div class="element4">
    element4
  </div>
  <div class="element5">
    element5
  </div>
</div>
<div class="divider">


</div>

答案 3 :(得分：0)

我会使用<div>

将屏幕的右半部分和左半部分划分为不同的区域

然后您可以在左侧 <div>

的顶部上插入静态元素

这是一个有用的示例 

body {
  max-width: 95%;
  background: #111;
}
.columnleft {
  float: left;
  max-width: 50%;
}
.columnright {
  float: right;
  max-width: 50%;
}
.article {
  border: 1px solid #999;
  display: inline-block;
  margin: 4%;
}
.title {
  color: #aff;
  font-size: 22px;
  text-align: center;
  margin: 20px 0 5px 0;
}
.content {
  color: #888;
  font-size: 18px;
  text-align: justify;
  padding: 20px;
  margin: 15px 15px 30px 15px
}
<body>
  <div class="columnleft">
    <div id="article1" class="article">
      <div class="title">Headline 1</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
        menandri mei te, praesent democritum no pro. Aliquid tractatos in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore.
      </div>
    </div>
    <div id="article2" class="article">
      <div class="title">Headline 2</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
        menandri mei te, praesent <br>democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum

      </div>
    </div>
    <div id="article3" class="article">
      <div class="title">Headline 3</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro.Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
      </div>
    </div>
  </div>
  <div class="columnright">
    <div id="article4" class="article">
      <div class="title">Headline 4</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit.
      </div>
    </div>
    <div id="article5" class="article">
      <div class="title">Headline 5</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
        menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum

      </div>
    </div>
    <div id="article6" class="article">
      <div class="title">Headline 6</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
        menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum
        no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit.
      </div>
    </div>
  </div>
</body>

相关问题
最新问题