Question

这是我的jsfiddle链接：http://jsfiddle.net/m9tk4uex/

第一列看起来不正确，这是一个缩小的范围。

    <div class="wrapper">
    <h1 class="collection-title">3 Easy Liquid Rubber Solutions For Your Customers</h1>
    <div class="main">
    <div class="column-1">
    <h3>Leaky Barn Roofs</h3>
    <img src="leaky-barn-roofs.jpg" alt="" />
    <p>Liquid Rubber MetalSafe ...</p>
    <img src="img1.jpg" alt="" />
    </div>
    <div class="column-2">
    <h3>Waterproof Planter</h3>
    <img src="waterproof-planter.jpg" alt="" />
    <p>Simple and easy to do...</p>
    <img src="img2.jpg" alt="" />
    </div>
    <div class="column">
    <h3>RV Roof Repair Boxes</h3>
    <img src="rv-roof-repair-boxes.jpg" alt="" />
    <p>You may be surprised...</p>
    <img src="img3.jpg" alt="" />
    </div>
    </div>
    </div>

我需要这样的东西http://s23.postimg.org/xghd34xbf/Untitled_1_copy.png

我可以知道如何解决这个问题吗？以及如何为每列添加边框权限？

感谢。

Answer 1

一种解决方案是将display: inline-block添加到div内的所有div，其中包含.main类：

div.main > div {
    display: inline-block;
}

另外，您可以将min-height添加到p元素以便正确对齐：

div.main div[class^=column] p {
    min-height: 170px;
}

body {
  background-color: #222222;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
}
.wrapper {
  width: 960px;
  margin-left: auto;
}
#header {
  position: relative;
  letter-spacing: 1px;
  height: 148px;
  padding-top: 19px;
  padding-bottom: 0px;
  background: url("//cdn.shopify.com/s/files/1/0334/3241/t/3/assets/header-bg.png?7423127476356136057") no-repeat scroll 0% 0% transparent;
}
#cart-login {
  float: right;
}
.cart-elem {
  display: block;
  font-size: 24px;
  color: #fff;
  margin: 0px;
  position: relative;
  top: 5px;
}
.main {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
}
.collection-title {
  color: #C5C5C5;
  font-size: 28px;
  line-height: 28px;
  margin: 15px 0px 16px;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  padding-bottom: 20px;
}
div.main > div {
  display: inline-block;
}
div.main div[class^=column] p {
  min-height: 170px;
}

<div class="wrapper">

  <h1 class="collection-title">3 Easy Liquid Rubber Solutions For Your Customers</h1>

  <div class="main">
    <div class="column-1">

      <h3>Leaky Barn Roofs</h3>

      <img src="http://s2.postimg.org/4zex34qw5/leaky_barn_roofs.jpg" alt="" />
      <p>Liquid Rubber MetalSafe Sealants provide corrosion protection, waterproofing and color restoration to aged rusting steel barn roofs, outlastingtypical barn roof paints for years. Our self priming coatings require only a washed surface without the
        removal of any rust and can be applied with a brush, roller or paint sprayer. Standard & custom color top-coats are available.</p>
      <img src="http://s17.postimg.org/3uwizx25r/img1.jpg" alt="" />
    </div>
    <div class="column-2">

      <h3>Waterproof Planter</h3>

      <img src="http://s2.postimg.org/4zex34qw5/leaky_barn_roofs.jpg" alt="" />
      <p>Simple and easy to do. Waterproof and preserve your wood planter boxes. Untreated wood planter boxes start to decay from the harmful effects of water and ultraviolet light. Two thick coats of Liquid Rubber Waterproof Sealant will provide long lasting
        and full protection that will secure your planter boxes for years to come.</p>
      <img src="http://s17.postimg.org/3uwizx25r/img1.jpg" alt="" />
    </div>
    <div class="column">

      <h3>RV Roof Repair Boxes</h3>

      <img src="http://s2.postimg.org/4zex34qw5/leaky_barn_roofs.jpg" alt="" />
      <p>You may be surprised at how inexpensive and simple it can be to repair an RV, motor home or camper yourself. Using a combination of Liquid Rubber Smooth Sealant and Liquid Rubber Seam Tape, any do-it-yourself customer can seal a leaky roof, whether
        it's made of EPDM, TPO, fiberglass or aluminum.</p>
      <img src="http://s17.postimg.org/3uwizx25r/img1.jpg" alt="" />
    </div>
  </div>
</div>

Answer 2

.main div h3：nth-child（1）{margin-top：0;}

Answer 3

请更新此代码

body {
background-color:#222222;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff;
}
.wrapper {
width:960px;
margin-left:auto;
}
#header {
    position: relative;
    letter-spacing: 1px;
    height: 148px;
    padding-bottom: 0px;
    background: url("//cdn.shopify.com/s/files/1/0334/3241/t/3/assets/header-bg.png?7423127476356136057") no-repeat scroll 0% 0% transparent;
}
#cart-login {
    float: right;
}
.cart-elem {
    display: block;
    font-size: 24px;
    color: #fff;
    margin: 0px;
    position: relative;
    top: 5px;

}

.main  {
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
     -webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 4px outset #ff00ff; /* Firefox */
    column-rule: 4px outset #ff00ff;
}
.collection-title {
color: #C5C5C5;
font-size: 28px;
line-height: 28px;
margin: 15px 0px 16px;
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
padding-bottom: 20px;
}
h3{margin: 0 0 10px;}

<div class="wrapper">
<h1 class="collection-title">3 Easy Liquid Rubber Solutions For Your Customers</h1>
<div class="main">
<div class="column-1">
<h3>Leaky Barn Roofs</h3>
<img src="http://s2.postimg.org/4zex34qw5/leaky_barn_roofs.jpg" alt="" />
<p>Liquid Rubber MetalSafe Sealants provide corrosion protection, waterproofing and color restoration to aged rusting steel barn roofs, outlastingtypical barn roof paints for years. Our self priming coatings require only a washed surface without the removal of any rust and can be applied with a brush, roller or paint sprayer. Standard & custom color top-coats are available.</p>
<img src="http://s17.postimg.org/3uwizx25r/img1.jpg" alt="" />
</div>
<div class="column-2">
<h3>Waterproof Planter</h3>
<img src="http://s2.postimg.org/4zex34qw5/leaky_barn_roofs.jpg" alt="" />
<p>Simple and easy to do. Waterproof and preserve your wood planter boxes. Untreated wood planter boxes start to decay from the harmful effects of water and ultraviolet light. Two thick coats of Liquid Rubber Waterproof Sealant will provide long lasting and full protection that will secure your planter boxes for years to come.</p>
<img src="http://s17.postimg.org/3uwizx25r/img1.jpg" alt="" />
</div>
<div class="column">
<h3>RV Roof Repair Boxes</h3>
<img src="http://s2.postimg.org/4zex34qw5/leaky_barn_roofs.jpg" alt="" />
<p>You may be surprised at how inexpensive and simple it can be to repair an RV, motor home or camper yourself. Using a combination of Liquid Rubber Smooth Sealant and Liquid Rubber Seam Tape, any do-it-yourself customer can seal a leaky roof, whether it's made of EPDM, TPO, fiberglass or aluminum.</p>
<img src="http://s17.postimg.org/3uwizx25r/img1.jpg" alt="" />
</div>
</div>
</div>

Answer 4

.column-1,.column-2,column{
    -webkit-column-break-inside: auto;
}

css中的问题对齐列数

4 个答案: