Не могут ли отступы для гибкого макета не разбить столбцы ширины? - PullRequest
0 голосов
/ 12 июня 2018

У меня есть две проблемы:

Первое: я не могу заполнить или выделить .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 голосов
/ 12 июня 2018

Во-первых: дайте вашим картам некоторое поле (я использовал margin: 0 5px для 5 пикселей слева и справа), затем установите его ширину width: calc(33.333% - 10px);, где 10 пикселей - это оба поля, сложенные вместе.

Второй: простосделайте свой card тег привязки <a>.

.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);
}
<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 -->
0 голосов
/ 12 июня 2018

Вы можете добавить отступы, вам просто нужно также установить css для размера блока в border-box

.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);
}
<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 -->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...