Question

大家好，我有以下图像的UI结构

First Image

2nd Image

请帮助我获取图像的结构。我已经尝试过HTML表格格式来获取它，但没有取得成功。有没有办法让一个普通的CSS来获取它。任何链接或代码将不胜感激。

先谢谢。

Answer 1

使用网格系统的Bootstrap将帮助您轻松构建图像： http://getbootstrap.com/css/#grid

<div class="row">
  <div class="col-md-3">Place first image here</div>
  <div class="col-md-6">Place second image here</div>
  <div class="col-md-3">Place third image here</div>
</div>
<div class="row">
  <div class="col-md-2">Place fourth image here</div>
  <div class="col-md-5">Place fifth image here</div>
  <div class="col-md-5">Place sixth image here</div>
</div>
<div class="row">
  <div class="col-md-4">Place seventh image here</div>
  <div class="col-md-4">Place eighth image here</div>
  <div class="col-md-4">Place ninth image here</div>
</div>

为了更好地理解代码，只需阅读引导网站上的网格系统手册。使用该网格系统创建漂亮的移动视图也非常容易。

Answer 2

和所有其他人一样，我建议使用twitter-bootstrap（http://getbootstrap.com/css/#grid），所以这个答案全部归功于Zoker。

如果你想编码它，你可以简单地用div，margin和浮点数来做。

<强> HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="main">
            <div class="box_size_small">

            </div>
            <div class="box_size_medium">

            </div>
            <div class="box_size_large">

            </div>
        </div>
    </body>
</html>

<强> CSS

    .box_size_small{
    width:100px;
    height:100px;
    border-style:solid;
    border-color:blue;
    float:left;
    margin:10px;
}
.box_size_medium{
    width:200px;
    height:100px;
    border-style:solid;
    border-color:red;   
    float:left;
    margin:10px;
}
.box_size_large{
    width:300px;
    height:150px;
    border-style:solid;
    border-color:yellow;
    float:left;
    margin:10px;
}

这是在短时间内创建的，但它应该得到这个想法。这不是一个多功能的解决方案。你想要更多功能？ http://getbootstrap.com/css/#grid

CSS或HTML设计

2 个答案: