quiz
quiz copied to clipboard

Published 20 hours ago •

Reame
Issues

CSS基础测试17

Open zhangxinxu opened this issue 5 years ago • 18 comments

trafficstars

实现下图所示的布局效果：

图片直接访问

请附上对应的CSS代码，注意缩进和代码高亮，可以使用下面语法进行高亮：

```html
你的代码在这里
```

```css
你的代码在这里
```

本期小测需要提供在线demo，不要参考别人的回答，诚实守信。

本期小测无直播答疑，但是会总结要点。

感谢您的参与！

Jan 15 '20 10:01 zhangxinxu

    .container-grid {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: 1fr 1fr;
        grid-row-gap: 10px;
        grid-column-gap: 10px;
    }
    
    .grid-item-first {
        grid-row-start: 1;
        grid-row-end: 3;
    }
    
    .grid-item-first img {
        width: 100%;
        height: 100%;
        display: block;
        text-align: center;
    }
    
    img {
        width: 100%;
        height: auto;
        text-align: center;
    }

    <div class="container-grid">
        <div class="grid-item-first">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1561582783,50747065&fm=26&gp=0.jpg" alt="">
        </div>

        <div class="grid-item">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1561582783,50747065&fm=26&gp=0.jpg" alt="">
        </div>
        <div class="grid-item">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1561582783,50747065&fm=26&gp=0.jpg" alt="">
        </div>
        <div class="grid-item">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1561582783,50747065&fm=26&gp=0.jpg" alt="">
        </div>
        <div class="grid-item">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1561582783,50747065&fm=26&gp=0.jpg" alt="">
        </div>
    </div>

Jan 15 '20 13:01 lifelikejuly

完全没什么思路只能按3栏的思路来做了……我这样回答会被大佬打吗（逃

div {
  display: inline-block;
  font-size: 0;
}

img {
  display: block;
  margin-right: 10px;
  margin-bottom: 10px;
}

  <div>
    <div>
      <img src="https://picsum.photos/200/400">
    </div>
    <div>
      <img src="https://picsum.photos/300/195?random=1">
      <img src="https://picsum.photos/300/195?random=2">
    </div>
    <div>
      <img src="https://picsum.photos/300/195?random=3">
      <img src="https://picsum.photos/300/195?random=4">
    </div>
  </div>

上面这个方法确实不太利于重构，换了个方法，利用浮动定位来解决

div {
  position: relative;
  font-size: 0;
}

img {
  margin-right: 10px;
}

img:nth-of-type(2n) {
  position: absolute;
  top: 0;
}

<div>
  <img src="https://picsum.photos/200/400">
  <img src="https://picsum.photos/300/195?random=1">
  <img src="https://picsum.photos/300/195?random=2">
  <img src="https://picsum.photos/300/195?random=3">
  <img src="https://picsum.photos/300/195?random=4">
</div>

Jan 15 '20 15:01 LuckyRabbitFeet

.container {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(auto-fit,1fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "first" "first";
    grid-gap: 6px;
}
.item:first-child {
    grid-area: first;    
}
.item img {
    width: 100%; height: 100%;
}

<div class="container">
    <div class="item">
        <img src="https://www.zhangxinxu.com/study/202001/xugou-1.jpg"/>
    </div>
    <div class="item">
        <img src="https://www.zhangxinxu.com/study/202001/xugou-2.jpg"/>
    </div>
    <div class="item">
        <img src="https://www.zhangxinxu.com/study/202001/xugou-3.jpg"/>
    </div>
    <div class="item">
        <img src="https://www.zhangxinxu.com/study/202001/xugou-4.jpg"/>
    </div>
    <div class="item">
        <img src="https://www.zhangxinxu.com/study/202001/xugou-5.jpg"/>
    </div>
</div>

Jan 16 '20 01:01 liyongleihf2006

<ul class="grid-container">
  <li class="grid-item">
    <img src="http://b-ssl.duitang.com/uploads/item/201507/04/20150704212949_PSfNZ.jpeg" alt="">
  </li>
  <li class="grid-item">
    <img src="http://a3.att.hudong.com/35/34/19300001295750130986345801104.jpg" alt="">
  </li>
  <li class="grid-item">
    <img src="http://a4.att.hudong.com/72/82/19300000009075130804824786610.jpg" alt="">
  </li>
  <li class="grid-item" >
    <img src="http://file02.16sucai.com/d/file/2014/0829/b871e1addf5f8e96f3b390ece2b2da0d.jpg" alt="">
  </li>
  <li class="grid-item">
    <img src="http://file02.16sucai.com/d/file/2014/0829/b871e1addf5f8e96f3b390ece2b2da0d.jpg" alt="">
  </li>
</ul>

.grid-container {
  margin: 0;
  padding: 0;

  display: grid;
  grid-auto-flow: column;
  list-style: none;
  grid-template-columns: repeat(auto-fill, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 5px;
}
.grid-item {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.grid-item:first-child {
  grid-row: 1 / 3;
}
.grid-item img {
  width: 100%;
  height: 100%;
}

Jan 16 '20 03:01 zy017

.con {
    display: grid;
    grid-auto-flow: column;
    grid-template:repeat(2, 1fr)/repeat(3, 1fr);
    grid-gap: 10px;
}
.item:first-child {
    grid-area:span 2;    
}
.item img {
  width: 100%; 
  height: 100%;
  object-fit:cover;
}

<div class="con">
    <div class="item">
        <img src="https://www.zhangxinxu.com/study/202001/xugou-1.jpg"/>
    </div>
    <div class="item">
        <img src="https://www.zhangxinxu.com/study/202001/xugou-2.jpg"/>
    </div>
    <div class="item">
        <img src="https://www.zhangxinxu.com/study/202001/xugou-3.jpg"/>
    </div>
    <div class="item">
        <img src="https://www.zhangxinxu.com/study/202001/xugou-4.jpg"/>
    </div>
    <div class="item">
        <img src="https://www.zhangxinxu.com/study/202001/xugou-5.jpg"/>
    </div>
</div>

Jan 16 '20 06:01 XboxYan

用grid实现了一个超简版的，暂时没考虑图片拉伸；

.demo {
  display: grid;
  grid-template: repeat(2, 1fr)/repeat(3, 1fr);
  gap: 10px;
  height: 400px;
}
.pic {
  width: 100%;
  height: 100%;
}
.pic:nth-of-type(1) {
  grid-row: 1/3;
  grid-column: 1/2;
}
.pic:nth-of-type(2) {
  grid-row: 1/2;
  grid-column: 2/3;
}
.pic:nth-of-type(3) {
  grid-row: 2/3;
  grid-column: 2/3;
}
.pic:nth-of-type(4) {
  grid-row: 1/2;
  grid-column: 3/4;
}
.pic:nth-of-type(5) {
  grid-row: 2/3;
  grid-column: 3/4;
}

<div class="demo">
  <img class="pic" src="https://placekitten.com/200/400">
  <img class="pic" src="https://placekitten.com/200/200">
  <img class="pic" src="https://placekitten.com/201/201">
  <img class="pic" src="https://placekitten.com/202/202">
  <img class="pic" src="https://placekitten.com/203/203">
</div>

Jan 16 '20 10:01 xxf1996

        *{
            padding: 0;
            margin: 0;
        }
        ol,li{
            list-style: none;
        }
        ol{
            display: grid;
            grid-template: repeat(2, 1fr) / repeat(3, 1fr);
            grid-gap: 1rem;
        }
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        ol>li:nth-child(1){
            grid-row: 1 / 3;
        }

    <ol>
        <li>
            <img style="-webkit-user-select: none;" src="https://qidian.qpic.cn/qidian_common/349573/86a8152adca744c5282280cc4913a7ea/0">
        </li>
        <li>
            <img style="-webkit-user-select: none;" src="https://qidian.qpic.cn/qidian_common/349573/86a8152adca744c5282280cc4913a7ea/0">
        </li>
        <li>
            <img style="-webkit-user-select: none;" src="https://qidian.qpic.cn/qidian_common/349573/86a8152adca744c5282280cc4913a7ea/0">
        </li>
        <li>
            <img style="-webkit-user-select: none;" src="https://qidian.qpic.cn/qidian_common/349573/86a8152adca744c5282280cc4913a7ea/0">
        </li>
        <li>
            <img style="-webkit-user-select: none;" src="https://qidian.qpic.cn/qidian_common/349573/86a8152adca744c5282280cc4913a7ea/0">
        </li>
    </ol>

Jan 16 '20 15:01 guqianfeng

<ul class="img-list">
    <li>
        <img src="http://image1032.mangabz.com/19/18258/619204/1_9531.jpg?cid=9236&key=a33d2c2694c0a8d7b5a128d3d3ca5dc6&uk="
            alt="">
    </li>
    <li>
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2851420117,803815229&fm=11&gp=0.jpg" alt="">

    </li>
    <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579198797495&di=106d7a061eeb25d80fd1b8ca67ea9a0c&imgtype=0&src=http%3A%2F%2Fww2.sinaimg.cn%2Flarge%2F95c025ecgw1f6ilj2vbbaj21pw18gqv5.jpg"
            alt=""></li>
    <li>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579198980049&di=41e1d7b0372ab2de84a3483cfaa8e0ae&imgtype=0&src=http%3A%2F%2Fwww.005.tv%2Fuploads%2Fallimg%2F190115%2F49-1Z115101A6217.jpg"
            alt="">
    </li>
    <li>
        <img src="http://pics1.baidu.com/feed/8ad4b31c8701a18b17d8d5a51c48170e2938fe93.jpeg?token=a8b14547d58895243faa167961c48249&s=E9903F9C10037FEF742841710300C0E2"
            alt="">
    </li>
</ul>

.img-list {
  display: grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
  list-style: none;
  font-size: 0;
}
img {
  width: 100%;
  height: 100%;
}
li:first-child {
  grid-area: 1 / 1 / 3 / 2;
}

Jan 16 '20 16:01 livetune

.imglist{
  list-style: none;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row dense;
  grid-gap:10px;
}
.imglist__item:first-child{
  grid-row-start:1;
  grid-row-end:3;
}
.imglist__item img{
  width:100%;
  height:100%;
}

<ul class="imglist">
  <li class="imglist__item">
    <a href="#">
      <img src="http://baike.soso.com/p/20091203/20091203225012-1583825022.jpg" alt="">
    </a>
  </li>
  <li class="imglist__item">
    <a href="#">
      <img src="http://a3.att.hudong.com/44/95/01300542667193141387952986188.jpg" alt="">
    </a>
  </li>
  <li  class="imglist__item">
    <a href="#">
      <img src="http://a4.att.hudong.com/03/25/20300001045622130690259454464.jpg" alt="">
    </a>
  </li>
  <li  class="imglist__item">
    <a href="#">
      <img src="http://cdn.duitang.com/uploads/item/201303/28/20130328125931_W4GmL.jpeg" alt="">
    </a>
  </li>
  <li  class="imglist__item">
    <a href="#">
      <img src="http://chinadafen.com/uploads/allimg/130912/1-1309121A930118.jpg" alt="">
    </a>
  </li>
</ul>

Jan 17 '20 00:01 sghweb

img:first-child {
    height: 100%;
}

.img-div {
    width: 100px;
    height: 100px;
}

.img-div:first-child {
    width: 100px;
    height: 200px;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "index1 index2 index4"
        "index1 index3 index5";
}

.index1 {
    grid-area: index1;
}

.index2 {
    grid-area: index2;
}

.index3 {
    grid-area: index3;
}

.index4 {
    grid-area: index4;
}

.index5 {
    grid-area: index5;
}

<div class="container">
    <div class="img-div index1">
        <img src="http://static.jsbin.com/images/dave.min.svg">
    </div>
    <div class="img-div index2">
        <img src="http://static.jsbin.com/images/dave.min.svg">
    </div>
    <div class="img-div index3">
        <img src="http://static.jsbin.com/images/dave.min.svg">
    </div>
    <div class="img-div index4">
        <img src="http://static.jsbin.com/images/dave.min.svg">
    </div>
    <div class="img-div index5">
        <img src="http://static.jsbin.com/images/dave.min.svg">
    </div>
</div>

Jan 17 '20 01:01 rayj1993

// flex布局，局限：需要定宽
:root {
  --box-width: 810px;
  --box-width-negative: -810px;
}
.list{
  list-style-type: none;
  width: var(--box-width);
  height: 360px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap:wrap;
  padding-left: calc((var(--box-width) - 5px * 3) / 3);
  box-sizing: border-box;
}
.list > li{
  width: calc((var(--box-width) - 5px * 3) / 3);
  height: 50%;
  margin-left: 5px;
  margin-bottom: 5px;
}
.list img{
  width: 100%;
  height: 100%;
}
li:first-child{
  margin-left: calc((var(--box-width-negative) + 5px * 3) / 3);
  height: 50%;
}
li:first-child img{
  height: calc(200% + 5px);
}

<ul class="list">
  <li>
    <img src="https://qidian.gtimg.com/yuewen/v1/css/images/ip2/book/lingjianshan.png" alt="1" /></li>
  <li>
    <img src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/5b3b2295c9fae83cd986b2e7ecd1410d.jpg" alt="2" />
  </li>
  <li>
    <img src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/02934bbfb9db51934dbb8cf20d579e87.jpg" alt="3" />
  </li>
  <li>
    <img src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/02934bbfb9db51934dbb8cf20d579e87.jpg" alt="4" />
  </li>
  <li>
    <img src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/5b3b2295c9fae83cd986b2e7ecd1410d.jpg" alt="5" />
  </li>
</ul>

Jan 17 '20 03:01 asyncguo

Demo https://codepen.io/crazyboy/pen/povQoRa

<ol class="rank-list">
	<li><img src="https://bookcover.yuewen.com/qdbimg/349573/1017133071/180" alt="拜拜九叔"></li>
	<li><img src="https://bookcover.yuewen.com/qdbimg/349573/1017532811/180" alt="重生洪荒之我成了燃灯老师"></li>
	<li><img src="https://bookcover.yuewen.com/qdbimg/349573/1016562796/180" alt="大千独游"></li>
	<li><img src="https://bookcover.yuewen.com/qdbimg/349573/1017625899/180" alt="从九龙夺嫡开始"></li>
	<li><img src="https://bookcover.yuewen.com/qdbimg/349573/1017455102/180" alt="道一有扇众妙门"></li>
</ol>

.rank-list {
	list-style: none;
	--item-width: 15em;
	--item-height: 10em;
	--item-margin: 0.5em;
	width: calc(var(--item-width) * 3 + var(--item-margin) * 2);
}
.rank-list li {
	float: left;
}
.rank-list li>img {
	width: 100%;
	height: 100%;
}
.rank-list li:first-child {
	display: inline-block;
	width: var(--item-width);
	height: calc(var(--item-height) * 2 + var(--item-margin));
	margin-top: var(--item-margin);
}
.rank-list li+li {	
	width: var(--item-width);
	height: var(--item-height);
	margin-top: var(--item-margin);
	margin-left: var(--item-margin);
}

Jan 19 '20 14:01 NeilChen4698

<div class="wrap">
  <img src="http://placehold.it/248x350" alt="">
  <img src="http://placehold.it/248x170" alt="">
  <img src="http://placehold.it/248x170" alt="">
  <img src="http://placehold.it/248x170" alt="">
  <img src="http://placehold.it/248x170" alt="">
</div>

.wrap{
  display: grid;
  grid-template-columns: 248px 248px 248px;
  grid-gap:10px;
}
img{
  width: 100%;
}
img:first-child{
  grid-row-start: 1;
  grid-row-end: 3;
}

Jan 20 '20 01:01 sunyongming

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <ul class="unorder-list">
      <li class="list-item">1
        <img
          class="image"
          src="http://img3.imgtn.bdimg.com/it/u=4030795768,3275669685&fm=26&gp=0.jpg"
          alt=""
        />
      </li>
      <li class="list-item">2
        <img
          class="image"
          src="http://img3.imgtn.bdimg.com/it/u=4030795768,3275669685&fm=26&gp=0.jpg"
          alt=""
        />
      </li>
      <li class="list-item">3
        <img
          class="image"
          src="http://img3.imgtn.bdimg.com/it/u=4030795768,3275669685&fm=26&gp=0.jpg"
          alt=""
        />
      </li>
      <li class="list-item">4
        <img
          class="image"
          src="http://img3.imgtn.bdimg.com/it/u=4030795768,3275669685&fm=26&gp=0.jpg"
          alt=""
        />
      </li>
      <li class="list-item">5
        <img
          class="image"
          src="http://img3.imgtn.bdimg.com/it/u=4030795768,3275669685&fm=26&gp=0.jpg"
          alt=""
        />
      </li>
    </ul>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

.unorder-list {
  display: flex;
  height: 200px;
  overflow: hidden;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
}
.list-item {
  flex-basis: 100px;
  
  height: 100px;
  
  /* float: left; */
}
.image {
  height: 82%;
  object-fit: cover;
}
.list-item:first-child {
  height: 200px;
}

Jan 20 '20 10:01 zer0fire

预览图

DEMO：JSBIN

/*writing-mode*/
.box{
    margin: 0;
    font-size: 0;
    height: 216px;
    max-width: 100%;
    overflow:auto;
    writing-mode: vertical-lr;
}
.box a{
    margin-right: 8px;
    margin-bottom: 8px;
    display: inline-block;
}

/* flex */
.box-flex{
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 216px;
    flex-wrap: wrap;
    align-content: baseline;
    overflow: auto;
}
.box-flex a{
    margin-right: 8px;
    margin-bottom: 8px;
}
.box-flex img{
    vertical-align: top;
}

<h3>writing-mode</h3>
<p class="box">
    <a href="#" title="1"><img width="150" height="208" src="https://placem.at/people?w=150&h=208&txt=1" alt="1"></a>
    <a href="#" title="2"><img width="150" height="100" src="https://placem.at/people?w=150&h=100&txt=2" alt="2"></a>
    <a href="#" title="3"><img width="150" height="100" src="https://placem.at/people?w=150&h=100&txt=3" alt="3"></a>
    <a href="#" title="4"><img width="150" height="100" src="https://placem.at/people?w=150&h=100&txt=4" alt="4"></a>
    <a href="#" title="5"><img width="150" height="100" src="https://placem.at/people?w=150&h=100&txt=5" alt="5"></a>
</p>
  
<h3>flex</h3>
<p class="box-flex">
    <a href="#" title="1"><img width="150" height="208" src="https://placem.at/people?w=150&h=208&txt=1" alt="1"></a>
    <a href="#" title="2"><img width="150" height="100" src="https://placem.at/people?w=150&h=100&txt=2" alt="2"></a>
    <a href="#" title="3"><img width="150" height="100" src="https://placem.at/people?w=150&h=100&txt=3" alt="3"></a>
    <a href="#" title="4"><img width="150" height="100" src="https://placem.at/people?w=150&h=100&txt=4" alt="4"></a>
    <a href="#" title="5"><img width="150" height="100" src="https://placem.at/people?w=150&h=100&txt=5" alt="5"></a>
</p>

Jan 20 '20 12:01 ziven27

body, ul {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap ;
  width: 700px;
  height: 320px;
  margin: 50px auto;
  overflow: hidden;
  border: 1px solid red;
}
li {
  list-style: none;
}
.img-list {
  padding-left: 5px;
  padding-bottom: 5px;
}
.img-list {
  width: 33.33%;
  height: 50%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}
.img-list:first-child {
  height: 100%;
  padding-left: 0;
}
.img-list:nth-child(2n+1) {
  padding-bottom: 0;
}
.img-list img {
  width: 100%;
  height: 100%;
}

<ul class="container">
  <li class="img-list">
    <img src="https://s2.ax1x.com/2020/01/21/1FqssK.png" alt="">
  </li>
  ...
</ul>

Jan 21 '20 07:01 smileyby

本期小测是要考察垂直流的布局。
3种不错的实现：writing-mode: vertical-lr、flex-direction: column、以及grid-auto-flow: column。兼容性依次递减。具体实现大家可以搜索对应的小伙伴的实现。

Feb 12 '20 10:02 zhangxinxu

关于这个布局，看张老师这篇就够了：https://www.zhangxinxu.com/wordpress/2020/01/css-grid-auto-flow/

.poster {
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(3, 1fr);
  grid-auto-flow: column;
  grid-template-areas:
    "海边女孩 花园 金发女郎"
    "海边女孩 都市 山峰";
  gap: 8px;
  padding: 0;
  margin: 0;
  counter-reset: order;
  list-style: none;
}

.poster-item:first-child {grid-area: 海边女孩;}
.poster-item::before {
  content: counters(order, '');
  counter-increment: order;
  position: absolute;
  padding: .25em .5em;
  color: #fff;
  background: rgba(0, 0, 0, .6);
}

.poster-item > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<ul class="poster">
  <li class="poster-item">
    <img src="https://cdn.pixabay.com/photo/2014/12/30/13/19/girls-583917_960_720.jpg" alt="海边女孩">
  </li>
  <li class="poster-item">
    <img src="https://cdn.pixabay.com/photo/2019/10/21/10/33/garden-4565700_960_720.jpg" alt="花园">
  </li>
  <li class="poster-item">
    <img src="https://cdn.pixabay.com/photo/2019/10/27/18/48/chinatown-4582511_960_720.jpg" alt="都市">
  </li>
  <li class="poster-item">
    <img src="https://cdn.pixabay.com/photo/2016/12/03/14/20/woman-1879905_960_720.jpg" alt="金发女郎">
  </li>
  <li class="poster-item">
    <img src="https://cdn.pixabay.com/photo/2019/10/08/18/13/matterhorn-4535693_960_720.jpg" alt="山峰">
  </li>
</ul>

Mar 16 '20 12:03 wingmeng