两个Div在四肢之间彼此相邻

时间：2016-08-23 17:31:56

标签： javascript jquery html css

Preview of Design

我正在尝试将2个div放入4个cols中我尝试了几个东西，浮动，位置等 - 没有任何效果，我无法按照我的意愿安排它。任何想法如何使其工作？ 

<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; */
        }

    }

}

2 个答案:

答案 0 :(得分：0)

有很多不同的方法可以实现这一点，但是，我们只是向您展示如何使用flexbox来实现这一目标。

<强> jsFiddle

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

如果你不熟悉flexbox，你可以在很多网站上学习和阅读它，这里有一些列表：

答案 1 :(得分：0)

就像上面说的harzzn一样，你应该看看Bootstrap。它会让你的生活更轻松。 但是，这里的代码将执行您想复制的内容：

首先（你处于良好的轨道上），如果你将你的div漂浮在另一个旁边，你需要声明宽度，因为如果它们是100％，你不能将两个div放在另一个旁边宽。这是默认的。因此，我们将分割空间50 50并将它们放在另一个旁边。

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

现在剩下的就是你做同样的事情。我们将你的图片div和文本div分成50 50：

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

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

最后我们将按钮放在右边，使其宽度与上面的div相同：

button.view-button {
    float: right;
    width: 50%;
}
相关问题
最新问题