Question

我没有找到答案，所以：

我想在我的博客中这样做： - 2行（使用div标签，不是表格） - 在每一行中，将有一个特定大小的正方形图像的宽度百分比（例如40％，我不知道如何设置高度以保持方形）和一个带有文本的颜色方块，与图像的大小相同

＆＃13;

square image                text inside square

text inside square          square image

＆＃13;

到目前为止，我有这个：

＆＃13;

    <style type="text/css">
    .element {
    	float:left;
            width: 50vh;
            height:50vh;
    	border: 1px solid #000000;
    	margin:0 10px 0 0;
    	margin-left:5%;
    	margin-right:5%;
    	margin-top:10%;
    	align:center;
    }
    </style>
    
<div class="element">
  <img src="wp-content/uploads/2015/04/luices.jpg" alt="Mountain View" width="400px">
</div>
<div class="element">Some text</div>
    
<div class="element">Some text</div>
<div class="element">
 <img src="wp-content/uploads/2015/04/luices.jpg" alt="Mountain View" width="400px">
</div>

＆＃13;

但是有很多问题：

1-我不知道如何使用＆＃34; vh＆＃34;宽度，而且，据我所知，浏览器兼容性是一个问题。我只是想把这两个正方形宽度的40％放在宽度的7％（从侧面和相互之间）。第二行相同。

2-我也需要移动兼容性。

3-当你在一个小窗口（或手机）中打开网站时，第二个方格会下降（没关系）但是我需要正方形的顺序：

＆＃13;

square image 
text inside square
square image 
text inside square

＆＃13;

这与每个浏览器对我的代码所做的不同，它保持相同的原始顺序：图像，文本，文本，图像。

我希望我能解释清楚。

非常感谢你。鲍勃

Answer 1

因此，为了在移动设备上获得正确的布局，您需要使用

@media

属性，将css属性设置为移动设备友好。

我做了一个plnkr，我在我的桌面和nexus 5上进行了测试，关键是这两个css属性：

  div.row{
    min-height: 25vh;
    margin-bottom: 4vw;
  }

  div.col-40{
    background-color: #333;
    width: 44vw;
    min-height: 25vh; /* set to the same as div.row min-height  */
    max-height: 25vh; /* set to the same as div.row min-height  */
    margin-left: 1vw;
    padding: 1vh;
    overflow: hidden;
    text-align: center;
    display: inline-block;
  }

http://plnkr.co/edit/d2C3xOiNYjaUqVeX2yf4?p=preview

基本上你需要在另一个div中包装你想要彼此相邻的div，在这种情况下.row。

如果您的图像大于div，则会隐藏溢出。你很可能需要为你的博客搞砸css，但希望这可以让你到达你需要的地方。

您也应该使用vw作为宽度属性（vw =视口宽度）。 1 vw或1 vh =视口宽度或高度的1/100。

浮子：左;很可能是搞乱div命令。我更喜欢使用display：inline-block;具有关系宽度值，与vw。

一样

2行2个正方形，分隔并居中（CSS / HTML）

1 个答案: