Question

主要目标是使figcaptions的内容最具适应性，因为我们不知道其内容的确切大小。当我们悬停figcaption显示其整个大小的内容时，总会显示图的标题。为什么选择flexbox？未覆盖的数字将文本描述压缩为0.当悬停flexbox要增长？我知道这是可能的，但我想念一些东西。我错误的任何想法？

* {
	box-sizing: border-box;
}
body {
	font-family: "Open Sans", sans-serif;	
}
.wrapper {
	text-align: center;
}
img{
	vertical-align: middle;
}
figure {
	display: inline-block;
	margin: 50px auto;
	border: 1px solid #333;
	position: relative;
}
figcaption {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;	
	align-content: flex-end;
	text-align: left;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	color: #fff;
}
.news-title {
	border: 1px solid green;
	transition: 300ms;
}
h3 {
	font-size: 18px;
	font-weight: 600;
	padding: 10px;
	background: rgba(0,0,0,.3);
    margin: 0;
}
span {
	flex: 0;
	overflow: hidden;
	border: 1px solid red;
	transition: 300ms;
	background: rgba(0,0,0,.3);
}
figure:hover span {
	flex: 1;
	transition: 500ms;
}

<div class="wrapper">
	<figure>
		<img src="http://nikolad0.bget.ru/img/news-preview.png" alt="" />
		<figcaption>
			<div class="news-title">
				<h3>Lorem ipsum dolor</h3>
			</div>
			<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora minima natus repellat optio! Dignissimos, cum quaerat distinctio quibusdam numquam accusantium ipsam laudantium excepturi impedit, laborum cupiditate, nihil reiciendis? Minima, error!</span>
		</figcaption>
	</figure>
</div>

Answer 1

 <style>
              * {
box-sizing: border-box;
 }
body {
font-family: "Open Sans", sans-serif;   
 }
.wrapper {
text-align: center;
 }
 img{
vertical-align: middle;
 }
figure {
display: inline-block;
margin: 50px auto;
border: 1px solid #333;
position: relative;
   }
 figcaption {
display: block;  
text-align: left;
position: absolute;
bottom: 0;
left: 0;
    width: 100%;
color: #fff;
   }
 .news-title {
border: 1px solid green;
/*transition: 300ms;*/
  }
  h3 {
font-size: 18px;
font-weight: 600;
padding: 10px;
background: rgba(0,0,0,.3);
margin: 0;
  }
  span {
    display: none;
     width:100%;
overflow: hidden;
border: 1px solid red;
/*transition: 300ms;*/
background: rgba(0,0,0,.3);
  }
  /*figure:hover span {

transition: 500ms;
  }*/
          </style>




    <div class="wrapper">
        <figure>
            <img src="http://nikolad0.bget.ru/img/news-preview.png" alt="" />
            <figcaption>
                <div class="news-title">
                    <h3>Lorem ipsum dolor</h3>
                </div>
                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora minima natus repellat optio! Dignissimos, cum quaerat distinctio quibusdam numquam accusantium ipsam laudantium excepturi impedit, laborum cupiditate, nihil reiciendis? Minima, error!</span>
            </figcaption>
        </figure>
    </div>


   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>-->
         <script>
             $(document).ready(function () {
                 $("figure").hover(function () {
                     $("span").slideToggle();

                 })

             });
         </script>

使用flexbox进行数字化处理

1 个答案: