两个Div彼此并列

Question

Preview of Design

I'm trying to position 2 divs into 4 cols I tried several things, with float, position etc - nothing worked, I can't arrange it as I want it. Any ideas how to make it work?

<section class="recent-clients cf">
   <div class="wrapper">
      <h4>Recent Projects</h4>
      <div class="recent-work-info">
         <div class="pull-left">
            <img src="images/recent-work.jpg">
         </div>
         <div class="text-recent">
            <h1>Virginia Travel For Kids</h1>
            <h6>Logo Design</h6>
            <div class="line"></div>
            <p>Nam vulputate tristique lorem at placerat. In eu sagittis justo. Vestibulum magna ante, faucibus quis risus sit amet, rutrum imperdiet nisi.</p>
         </div>
         <button class="view-button">View Project</button>
      </div>
      <div class="recent-work-info">
         <div class="pull-left">
            <img src="images/recent-work.jpg">
         </div>
         <div class="text-recent">
            <h1>Virginia Travel For Kids</h1>
            <h6>Logo Design</h6>
            <p>Nam vulputate tristique lorem at placerat. In eu sagittis justo. Vestibulum magna ante, faucibus quis risus sit amet, rutrum imperdiet nisi.</p>
         </div>
         <button class="view-button">View Project</button>
      </div>
      <div class="recent-work-info">
         <div class="pull-left">
            <img src="images/recent-work.jpg">
         </div>
         <div class="text-recent All artwork on this website falls under intellectual property law. No permission is given to copy, trace, reproduce or manipulate any work.">
            <h1>Virginia Travel For Kids</h1>
            <h6>Logo Design</h6>
            <p>Nam vulputate tristique lorem at placerat. In eu sagittis justo. Vestibulum magna ante, faucibus quis risus sit amet, rutrum imperdiet nisi.</p>
         </div>
         <button class="view-button">View Project</button>
      </div>
      <div class="recent-work-info">
         <div class="pull-left">
            <img src="images/recent-work.jpg">
         </div>
         <div class="text-recent">
            <h1>Virginia Travel For Kids</h1>
            <h6>Logo Design</h6>
            <p>Nam vulputate tristique lorem at placerat. In eu sagittis justo. Vestibulum magna ante, faucibus quis risus sit amet, rutrum imperdiet nisi.</p>
         </div>
         <button class="view-button">View Project</button>
      </div>
   </div>
</section>

CSS/SCSS

.recent-clients {
    margin: 14rem 0;

    h4 {
        background-color: $secoudmaincolor;
        color: $firstmaincolor;
        font-family: 'Lato', sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 3px;
        font-size: 1rem;
        padding: 24px;
        width: 33%;
        margin: 0 auto;
        margin-bottom: 2em;
        text-align: center;
        -webkit-box-shadow: 0px 8px 18px rgba(38,40,44,0.2);
        -moz-box-shadow: 0px 8px 18px rgba(38,40,44,0.2);
        box-shadow: 0px 8px 18px rgba(38,40,44,0.2);
    }


    .recent-work-info {
        margin:10px; 
        float: left;


        h1 {
            padding-top: 20px;
            padding-bottom: 0px;
            font-family: 'Open Sans', sans-serif;
            color: #24292f;
            margin-bottom: 0px;
            font-weight: 700;
            font-size: 1.0873958442073999rem;
        }

        h6 {
            font-family: 'Open Sans', sans-serif;
            color: #9b9b9b;
            padding: 9px;
            padding-bottom: 0px;
            font-size: 0.920104175867799rem;
        }

        p {
            font-family: 'Open Sans', sans-serif;
            font-size: inherit;
            color: #9b9b9b;
            margin-top: 0px;
            padding-bottom: 8px;
        }

        img {
            border: 1px solid black;
            width: 224px;
            min-height: 199px;
            margin-right: 18px;
            background-size: cover;

        }

        .text-recent {
            background-color: $offwhitecolor;
            margin: 0px; 
            width: 61%;
            // min-height: 200px;

        }

        .view-button {
            top: -1em;
            width: 33%;
            text-align: center;
            z-index: 9999;
            /* position: relative; */
        }

    }

}

Answer 1

There are many different ways to achieve this, however, I'll just show you how you can do this with flexbox.

---

jsFiddle

---

 * { box-sizing: border-box; } h4 { text-align: center; } .wrapper { display: flex; flex-wrap: wrap; justify-content: space-between } .recent-work-info { flex-basis: 48%; display: flex; background-color: dodgerblue; margin-bottom: 1em; } .recent-work-info img, .recent-work-info .text-recent { flex: 1 0 50%; } .titles { padding: 1em; border-bottom: 1px solid #f5f5f5; } .text-recent p { padding: 1em; } .view-button { border: 0; background-color: yellow; width: 100%; height: 3em; } 

 <section class="recent-clients"> <h4>Recent Projects</h4> <div class="wrapper"> <div class="recent-work-info"> <img src="http://placehold.it/100x100"> <div class="text-recent"> <div class="titles"> <h1>Title</h1> <h6>Subtitle</h6> </div> <p>Nam vulputate tristique lorem at placerat.</p> <button class="view-button">View Project</button> </div> </div> <div class="recent-work-info"> <img src="http://placehold.it/100x100"> <div class="text-recent"> <div class="titles"> <h1>Title</h1> <h6>Subtitle</h6> </div> <p>Nam vulputate tristique lorem at placerat.</p> <button class="view-button">View Project</button> </div> </div> <div class="recent-work-info"> <img src="http://placehold.it/100x100"> <div class="text-recent"> <div class="titles"> <h1>Title</h1> <h6>Subtitle</h6> </div> <p>Nam vulputate tristique lorem at placerat.</p> <button class="view-button">View Project</button> </div> </div> <div class="recent-work-info"> <img src="http://placehold.it/100x100"> <div class="text-recent"> <div class="titles"> <h1>Title</h1> <h6>Subtitle</h6> </div> <p>Nam vulputate tristique lorem at placerat.</p> <button class="view-button">View Project</button> </div> </div> </div> </section> 

---

If you are not familiar with flexbox, you can learn and read about it in many sites, here's a list of some of them:

• Codrops

• CSS-Tricks

• Flexbox Froggy

Answer 2

Like harzzn said above, you should look into Bootstrap. It will make your life easier. However, here is the code that will do what you want to replicate the picture you have referenced:

First (you were on the good track), if you are floating your divs left to lay them one next to another, you need to declare the width because you can't position two divs next to another if they are 100% wide. Which is default. So we will split the space 50 50 and position them one next to another.

.recent-work-info {
    float: left;
    width: 50%;
}

Now for the rest you are doing the same thing. We will split your picture div and text div into 50 50:

.pull-left {
    float: left;
    width: 50%;
}

.text-recent {
    width: 50%;
    float: left;
}

And finally we will position the button to the right and make it the same width as the div above:

button.view-button {
    float: right;
    width: 50%;
}