CSS Grid or Columns? [closed]

问题

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.

回答1:

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>

}

来源：https://stackoverflow.com/questions/54319900/css-grid-or-columns

标签

html

css

flexbox

multiple-columns

css-grid