无法填充flex布局不会破坏宽度列？

时间：2018-06-12 20:06:35

标签： html css css3 flexbox

我有两个问题：

首先：我不能填充或边距.card元素。我想在每张卡之间添加空格而不会出现断列。 它设置宽度：33.333%，更改填充或card元素的边距，它将被分成一行中的2个元素。

其次，我想添加一个指向.card的链接。意思是：如果用户点击3张牌中的一张，它将会打开。

目前，我必须为每个<a href="">添加span，img，...丢失时间并破坏CSS。

这是我的示例代码：

.card-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border-radius: 4px;
  overflow: hidden;
  padding: 5px;
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  align-items: left;
  padding: 0 0 15px 0;
  width: 33.333%;
  background: #ecf0f1;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
}

.card__image {
  position: relative;
  width: 100%;
  display: block;
  height: 125px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  overflow: hidden;
}
.card__image:hover {
  cursor: pointer;
}
.card__image:hover:after {
  bottom: 0;
  color: white;
  transition: all 0.15s;
}
.card__image:hover .image-overlay {
  background-color: rgba(35, 155, 55, 0.33);
  transition: all 0.15s;
}
.card__image:after {
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: -4em;
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: "FontAwesome";
  font-size: 1em;
  text-align: center;
  content: "\f00c";
  color: rgba(255, 255, 255, 0);
  color: #fff;
  transition: all 0.15s;
}
.card__image .image-overlay {
  display: block;
  position: absolute;
  width: 100%;
  height: 125px;
  top: 0;
  left: 0;
  content: "";
  background-color: rgba 255, 255, 255, 0;
  transition: backgroundColor, 0.15s;
}
.card__image img {
  display: block;
  width: 100%;
}

.card__actions {
  font-family: serif;
  font-size: 25px;
  line-height: 12px;
  color: #a3a3a3;
  text-align: right;
  padding: 0 8px 0 0;
  margin: 0;
}

span {
  display: block;
  border-radius: 3px;
  margin: 0.5em 0.5em 0 0.5em;
  color: #88888b;
}

span.line {
  background: #f0f0f0;
  color: #000;
  margin: 0;
  padding: 0.5em 0.5em;
  text-align: center;
}

span._short1 {
  color: #fff;
  background: linear-gradient(to right, #1f4037, #99f2c8);
}

span._short2 {
  color: #fff;
  background: linear-gradient(to right, #fc4a1a, #f7b733);
}

span._short3 {
  color: #fff;
  background: linear-gradient(to right, #ec008c, #fc6767);
}
<div class="card-container card--fixedWidth">
   <div class="card">
    
    <div class="card__image" id="card-1">
      <div class="image-overlay">
      </div>
      <img src="http://www.fubiz.net/wp-content/uploads/2014/11/Lotta-Nieminen_Google_07-640x553.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short1">Tải bộ cài Windows, Office chính chủ</span>
      <span class="line _long">Link trực tiếp từ server Microsoft giúp bạn dễ dàng chọn bất cứ phiên bản nào!</span>
    </div>
    
  </div><!-- /.card -->
  
   <div class="card">
    
    <div class="card__image" id="card-2">
      <div class="image-overlay">
      </div>
      <img src="https://s-media-cache-ak0.pinimg.com/736x/e7/f2/98/e7f298f2db462652fd8b9a1ee888458a.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short2">Get link hdonline</span>
      <span class="line _long">Giúp bạn xem phim chất lượng cao, không bị quảng cáo làm phiền</span>
    </div>
    
  </div><!-- /.card -->
  
  <div class="card">
    
    <div class="card__image" id="card-3">
      <div class="image-overlay">
      </div>
      <img src="https://d39fx46bzv2q62.cloudfront.net/wp-content/uploads/2014/11/g9.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short3">Emotion đẹp Facebook</span>
      <span class="line _long">Tạo mẫu status độc đáo, thêm Emoji ngộ nghĩnh làm sinh động Facebook của bạn.</span>
    </div>
    
  </div><!-- /.card -->
 
</div><!-- /.card-container -->

2 个答案:

答案 0 :(得分：2)

你可以添加填充，你只需要将box-sizing css设置为border-box

＆＃13;
＆＃13; 
.card-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border-radius: 4px;
  overflow: hidden;
  padding: 5px;
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  align-items: left;
  padding: 15px;
  box-sizing: border-box;
  width: 33.333%;
  background: #ecf0f1;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
}

.card__image {
  position: relative;
  width: 100%;
  display: block;
  height: 125px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  overflow: hidden;
}
.card__image:hover {
  cursor: pointer;
}
.card__image:hover:after {
  bottom: 0;
  color: white;
  transition: all 0.15s;
}
.card__image:hover .image-overlay {
  background-color: rgba(35, 155, 55, 0.33);
  transition: all 0.15s;
}
.card__image:after {
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: -4em;
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: "FontAwesome";
  font-size: 1em;
  text-align: center;
  content: "\f00c";
  color: rgba(255, 255, 255, 0);
  color: #fff;
  transition: all 0.15s;
}
.card__image .image-overlay {
  display: block;
  position: absolute;
  width: 100%;
  height: 125px;
  top: 0;
  left: 0;
  content: "";
  background-color: rgba 255, 255, 255, 0;
  transition: backgroundColor, 0.15s;
}
.card__image img {
  display: block;
  width: 100%;
}

.card__actions {
  font-family: serif;
  font-size: 25px;
  line-height: 12px;
  color: #a3a3a3;
  text-align: right;
  padding: 0 8px 0 0;
  margin: 0;
}

span {
  display: block;
  border-radius: 3px;
  margin: 0.5em 0.5em 0 0.5em;
  color: #88888b;
}

span.line {
  background: #f0f0f0;
  color: #000;
  margin: 0;
  padding: 0.5em 0.5em;
  text-align: center;
}

span._short1 {
  color: #fff;
  background: linear-gradient(to right, #1f4037, #99f2c8);
}

span._short2 {
  color: #fff;
  background: linear-gradient(to right, #fc4a1a, #f7b733);
}

span._short3 {
  color: #fff;
  background: linear-gradient(to right, #ec008c, #fc6767);
}
＆＃13; 
<div class="card-container card--fixedWidth">
   <div class="card">
    
    <div class="card__image" id="card-1">
      <div class="image-overlay">
      </div>
      <img src="http://www.fubiz.net/wp-content/uploads/2014/11/Lotta-Nieminen_Google_07-640x553.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short1">Tải bộ cài Windows, Office chính chủ</span>
      <span class="line _long">Link trực tiếp từ server Microsoft giúp bạn dễ dàng chọn bất cứ phiên bản nào!</span>
    </div>
    
  </div><!-- /.card -->
  
   <div class="card">
    
    <div class="card__image" id="card-2">
      <div class="image-overlay">
      </div>
      <img src="https://s-media-cache-ak0.pinimg.com/736x/e7/f2/98/e7f298f2db462652fd8b9a1ee888458a.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short2">Get link hdonline</span>
      <span class="line _long">Giúp bạn xem phim chất lượng cao, không bị quảng cáo làm phiền</span>
    </div>
    
  </div><!-- /.card -->
  
  <div class="card">
    
    <div class="card__image" id="card-3">
      <div class="image-overlay">
      </div>
      <img src="https://d39fx46bzv2q62.cloudfront.net/wp-content/uploads/2014/11/g9.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short3">Emotion đẹp Facebook</span>
      <span class="line _long">Tạo mẫu status độc đáo, thêm Emoji ngộ nghĩnh làm sinh động Facebook của bạn.</span>
    </div>
    
  </div><!-- /.card -->
 
</div><!-- /.card-container -->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

首先：给你的牌一些余量（我左右使用margin: 0 5px 5px）然后将宽度设置为width: calc(33.333% - 10px);，其中10px是两个边距加在一起。

第二：只需将card设为锚标<a>。

＆＃13;
＆＃13; 
.card-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border-radius: 4px;
  overflow: hidden;
  padding: 5px;
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  align-items: left;
  padding: 0 0 15px 0;
  margin: 0 5px;
  width: calc(33.333% - 10px);
  background: #ecf0f1;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
}

.card__image {
  position: relative;
  width: 100%;
  display: block;
  height: 125px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  overflow: hidden;
}
.card__image:hover {
  cursor: pointer;
}
.card__image:hover:after {
  bottom: 0;
  color: white;
  transition: all 0.15s;
}
.card__image:hover .image-overlay {
  background-color: rgba(35, 155, 55, 0.33);
  transition: all 0.15s;
}
.card__image:after {
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: -4em;
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: "FontAwesome";
  font-size: 1em;
  text-align: center;
  content: "\f00c";
  color: rgba(255, 255, 255, 0);
  color: #fff;
  transition: all 0.15s;
}
.card__image .image-overlay {
  display: block;
  position: absolute;
  width: 100%;
  height: 125px;
  top: 0;
  left: 0;
  content: "";
  background-color: rgba 255, 255, 255, 0;
  transition: backgroundColor, 0.15s;
}
.card__image img {
  display: block;
  width: 100%;
}

.card__actions {
  font-family: serif;
  font-size: 25px;
  line-height: 12px;
  color: #a3a3a3;
  text-align: right;
  padding: 0 8px 0 0;
  margin: 0;
}

span {
  display: block;
  border-radius: 3px;
  margin: 0.5em 0.5em 0 0.5em;
  color: #88888b;
}

span.line {
  background: #f0f0f0;
  color: #000;
  margin: 0;
  padding: 0.5em 0.5em;
  text-align: center;
}

span._short1 {
  color: #fff;
  background: linear-gradient(to right, #1f4037, #99f2c8);
}

span._short2 {
  color: #fff;
  background: linear-gradient(to right, #fc4a1a, #f7b733);
}

span._short3 {
  color: #fff;
  background: linear-gradient(to right, #ec008c, #fc6767);
}
＆＃13; 
<div class="card-container card--fixedWidth">
   <a href="#" class="card">
    
    <div class="card__image" id="card-1">
      <div class="image-overlay">
      </div>
      <img src="http://www.fubiz.net/wp-content/uploads/2014/11/Lotta-Nieminen_Google_07-640x553.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short1">Tải bộ cài Windows, Office chính chủ</span>
      <span class="line _long">Link trực tiếp từ server Microsoft giúp bạn dễ dàng chọn bất cứ phiên bản nào!</span>
    </div>
    
  </a><!-- /.card -->
  
   <a href="#" class="card">
    
    <div class="card__image" id="card-2">
      <div class="image-overlay">
      </div>
      <img src="https://s-media-cache-ak0.pinimg.com/736x/e7/f2/98/e7f298f2db462652fd8b9a1ee888458a.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short2">Get link hdonline</span>
      <span class="line _long">Giúp bạn xem phim chất lượng cao, không bị quảng cáo làm phiền</span>
    </div>
    
  </a><!-- /.card -->
  
  <a href="#" class="card">
    
    <div class="card__image" id="card-3">
      <div class="image-overlay">
      </div>
      <img src="https://d39fx46bzv2q62.cloudfront.net/wp-content/uploads/2014/11/g9.jpg" alt="" />
    </div>
    <div class="card__actions">
<!--       &#8230; -->
    </div>
    <div class="card__description">
      <span class="line _short3">Emotion đẹp Facebook</span>
      <span class="line _long">Tạo mẫu status độc đáo, thêm Emoji ngộ nghĩnh làm sinh động Facebook của bạn.</span>
    </div>
    
  </a><!-- /.card -->
 
</div><!-- /.card-container -->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题