CSS网格还是列? [英] CSS Grid or Columns?

问题描述

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

So I have already got my mobile version of my website laid out (see sketch below)

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

but now I am having trouble trying to achieve my envision goal for my desktop version. I did a quick sketch on paint to give you guys an idea of what I have so far.

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

The problem is though I want to keep my picture and textbox next to each other in the middle of the entire website. The paragraph and footer I can do myself. Is just I don't know what is the best solution to do to have my picture on the left side and the text on the right side while I can keep everything else on the bottom and do whatever I want there.

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

I want the picture (left side) and text (right side) to be like in the middle of the page.

推荐答案

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

put your picture and text in a div respectively and give that div below 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>

}

这篇关于CSS网格还是列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！