尽管图案不同，但图像尺寸相等

时间：2014-12-22 14:12:20

标签： html css

我已经尝试了很长时间来平衡这3张图像上的图像尺寸。我知道我可以通过在左右列上应用左右填充来使其相等。即使应用了不同的填充，我如何才能使图像和列的大小相等？

如下所示，由于填充差异，中心列/图像小于其他两个。如何在不在左右列的左侧和右侧创建另一个填充的情况下解决这个问题，因为这不适用于当前的设计

＆＃13;
＆＃13; 
.container-col {
  height: auto;
  display: table;
  margin-bottom: 20px;
}
.column-left,
.column-right,
.column-center {
  width: 33.333%;
  height: auto;
  box-sizing: border-box;
  
  border: 1px solid transparent;
}
.column-left {
  float: left;
  padding: 0 8px 20px 0em;
}
.column-right {
  float: right;
  padding: 0 0em 20px 8px;
}
.column-center {
  padding: 0 8px 20px 8px;
  display: inline-block;
  border-left-color: #e5e5e5;
  border-right-color: #e5e5e5;
}
.column-center {
  display: inline-block;
  border-left-color: #aaa;
  border-right-color: #aaa;
}
.top-div {
  height: auto;
}
.bottom-div {
  line-height: 18px;
  height: auto;
}
.bottom-div h5 {
  margin-top: 0px;
  margin-bottom: 10px;
  text-align: center;
}
.top-div img {
  width: 100%;
  height: auto;
}
.game-table {
  border-top: 1px dotted #aaa;
  margin-bottom: 10px;
}
.game-item {
  padding: 8px 0px;
  border-bottom: 1px dotted #aaa;
  height: auto;
}
.game-home {
  float: left;
  width: 44%;
  margin-right: 2%;
  text-align: right;
}
.game-vs {
  width: 8%;
  margin-right: 2%;
  display: inline-block;
  text-align: center;
}
.game-away {
  float: right;
  width: 44%;
  text-align: left;
}
＆＃13; 
<br>
<div class="container-col">
  <div></div>
  <div class="column-center">
    <div class="top-div">
      <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
    </div>
    <div class="bottom-div">
      <h5>headline</h5>

      <div class="game-table">
        <div class="game-item">
          <div class="game-home">home Team</div>
          <div class="game-vs">Vs.</div>
          <div class="game-away">away team</div>
        </div>
      </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div>
  </div>
  <div class="column-left">
    <div class="top-div">
      <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
    </div>
    <div class="bottom-div">
      <h5>headline</h5>

      <div class="game-table">
        <div class="game-item">
          <div class="game-home">home Team</div>
          <div class="game-vs">Vs.</div>
          <div class="game-away">away team</div>
        </div>
      </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div>
  </div>
  <div class="column-right">
    <div class="top-div">
      <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
    </div>
    <div class="bottom-div">
      <h5>headline</h5>

      <div class="game-table">
        <div class="game-item">
          <div class="game-home">home Team</div>
          <div class="game-vs">Vs.</div>
          <div class="game-away">away team</div>
        </div>
      </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

.container-col {
  height: auto;
  display: table;
  margin-bottom: 20px;
}
.column-left,
.column-right,
.column-center {
  width: 33.333%;
  height: auto;
  box-sizing: border-box;
  
  border: 1px solid transparent;
}
.column-left {
  float: left;
  padding: 0 8px 20px 0em;
}
.column-right {
  float: right;
  padding: 0 0em 20px 8px;
}
.column-center {
  padding: 0 8px 20px 8px;
  display: inline-block;
  border-left-color: #e5e5e5;
  border-right-color: #e5e5e5;
}
.column-center {
  display: inline-block;
  border-left-color: #aaa;
  border-right-color: #aaa;
}
.top-div {
  height: auto;
}
.bottom-div {
  line-height: 18px;
  height: auto;
}
.bottom-div h5 {
  margin-top: 0px;
  margin-bottom: 10px;
  text-align: center;
}
.top-div img {
  width: 100%;
  height: 200px;
}
.game-table {
  border-top: 1px dotted #aaa;
  margin-bottom: 10px;
}
.game-item {
  padding: 8px 0px;
  border-bottom: 1px dotted #aaa;
  height: auto;
}
.game-home {
  float: left;
  width: 44%;
  margin-right: 2%;
  text-align: right;
}
.game-vs {
  width: 8%;
  margin-right: 2%;
  display: inline-block;
  text-align: center;
}
.game-away {
  float: right;
  width: 44%;
  text-align: left;
}
<div class="container-col">
  <div></div>
  <div class="column-center">
    <div class="top-div">
      <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
    </div>
    <div class="bottom-div">
      <h5>headline</h5>

      <div class="game-table">
        <div class="game-item">
          <div class="game-home">home Team</div>
          <div class="game-vs">Vs.</div>
          <div class="game-away">away team</div>
        </div>
      </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div>
  </div>
  <div class="column-left">
    <div class="top-div">
      <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
    </div>
    <div class="bottom-div">
      <h5>headline</h5>

      <div class="game-table">
        <div class="game-item">
          <div class="game-home">home Team</div>
          <div class="game-vs">Vs.</div>
          <div class="game-away">away team</div>
        </div>
      </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div>
  </div>
  <div class="column-right">
    <div class="top-div">
      <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
    </div>
    <div class="bottom-div">
      <h5>headline</h5>

      <div class="game-table">
        <div class="game-item">
          <div class="game-home">home Team</div>
          <div class="game-vs">Vs.</div>
          <div class="game-away">away team</div>
        </div>
      </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div>
  </div>
</div>

您可以尝试修复图像的高度：

.top-div img {
  width: 100%;
  height: 200px;// a desired one.
}
相关问题
最新问题