CSS动态网格

Question

原谅帖子的标题 - 我对如何描述我试图实现的设计问题感到茫然......（这可能阻止我找到合适的解决方案）。

我有一个来自我的设计师的线框/补充：

就网格而言，它看起来像这样：

现在......显而易见的问题是如何让某些内容跨越网格或表格的两行或多列？ B / C的方式我读到这个，左边的方形标志或顶部的“即将推出”文字需要跨越两个领域......

这甚至可能吗？

任何帮助表示感谢。

Answer 1

有很多解决方案。这是使用float:left和嵌套div s。

的人

＆＃13;

＆＃13;

div {
  float: left;
}
#group {
  width: 200px;
  height: 100px;
}
#one {
  width: 100px;
  height: 100px;
  background-color: red;
}
#two {
  width: 200px;
  height: 30%;
  background-color: green;
}
#three {
  width: 200px;
  height: 70%;
  background-color: blue;
}
#four {
  width: 100px;
  height: 100px;
  background-color: red;
}

＆＃13;

<div id="one">
</div>
<div id="group">
  <div id="two">
  </div>
  <div id="three">
  </div>
</div>
<div id="four">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我的解决方案是使用div将三个部分中的每一个都设为容器。

然后，您可以根据需要使用可调边距和填充来定位元素。

.container{
  background: #333;
  padding:10px;
  color:white;
  height:auto;
  width:500px;
  display:inline-block;
}

.icon{
  float:left;
  padding:5px;
  height:30px;
  width:30px;
  background-color:green;
  display:inline-block;
  margin-right:10px;
}

<div class="container">
  <div class="icon">
    
  </div>
  <div class="coming-soon">
    COMING SOON TO MOBILE
  </div>
  <div class="downloads">
    <button>
     Apple
    </button>
    <button>
     Android
    </button>
  </div>
</div>

如果需要，您可以定位即将到来并下载类以进行更多自定义。

Answer 3

更简单的布局就是去。 HTML

<div class="wrapper">
<img style="float: left" src="your img" alt="whatevs"/>
<ul style="float:left">
<li><b>COMING SOON TO MOBILE</b></li>
<li><img src="1" alt="inline-block"/><img src="2" alt="inline-block"/></li>
</ul>
</div>

简单的CSS

.wrapper ul li img {
 display: inline-block;
 width: 50%;
 height: auto;
}

这里的事实是，代码被简化，布局易于阅读，div更少，更复杂。但是，事实上，有100种方法可以做到这一点，所以找到最适合你的鞋子的方法。