CSS网格还是列?

时间:2019-01-23 04:09:32

标签: html css flexbox multiple-columns css-grid

所以我已经布置好了我网站的移动版本(请参见下面的草图)

enter image description here

但是现在我在尝试实现桌面版本的构想目标时遇到了麻烦。我对油漆做了一个简单的草图,以便让大家了解我到目前为止的情况。

enter image description here

问题是,尽管我想将我的图片和文本框在整个网站中间彼此相邻。我可以自己做段落和页脚。只是我不知道将图片放在左侧,文本放在右侧,同时将其他所有内容都放在底部并在其中做我想做的最好的解决方案是什么。

我希望图片(左侧)和文本(右侧)像页面中间一样。

1 个答案:

答案 0 :(得分:1)

分别将图片和文本放在div中,并将该div放在CSS之下

.parent{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
 }
 .parent div{
 height:200px;
 width:300px;}
 
 .img img{
  width:100%;
  height:100%;
 }
 
  
<div class="parent">
<div class="image">
<img src="https://cdn.colorlib.com/shapely/wp-content/uploads/sites/12/2016/03/photo-1447834353189-91c48abf20e1-1-1.jpg"
          alt="">
</div>
<div class="text">
<h2>About Us</h2>
          <p>Usage of the Internet is becoming more common due to rapid advancement of technology and the power of
            globalization. Societies are becoming more inter-connected. Thoughts from different</p>
            <a href="">READ MORE</a>

</div>
</div>

}