我正在努力实现类似本网站第3页的内容：https://nicolesaidy.com/我有4张图片中的4张图片，我想在每张图片下面放置文字，我尝试了绝对的样式但是看起来并不好看每个屏幕分辨率。最好的方法是什么？
.tutorials {
margin: 15% auto 0;
width: 100%;
height: auto;
text-align: center;
}
.panda img {
max-width:100%;
float:left;
}
.paper img {
max-width:100%;
float:left;
}
.santa img {
max-width:100%;
float:left;
}
.swan img {
max-width:100%;
float:left;
} <div class="tutorials">
<div class="panda">
<img src="http://via.placeholder.com/100x100" alt="Panda">
</div>
<div class="paper">
<img src="http://via.placeholder.com/100x100" alt="Paper" height="100" width="100">
</div>
<div class="santa">
<img src="http://via.placeholder.com/100x100" alt="Santa" height="100" width="100">
</div>
<div class="swan">
<img src="http://via.placeholder.com/100x100" alt="Swan" height="100" width="100">
</div>
</div>
答案 0 :(得分：0)
试试这个：
> data(aSAH)
> rocobj <- roc(aSAH$outcome, aSAH$s100b)
> ci(rocobj, method = "delong")
95% CI: 0.6301-0.8326 (DeLong)
> ci(rocobj, method = "bootstrap", boot.n = 10000)
95% CI: 0.6296-0.8283 (10000 stratified bootstrap replicates)
答案 1 :(得分：0)
我使用了flex
HTML
<div class="wrapper">
<div class="card">
<img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="">
<p>Hello</p>
</div>
<div class="card">
<img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="">
<p>Hello</p>
</div>
<div class="card">
<img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="">
<p>Hello</p>
</div>
<div class="card">
<img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="">
<p>Hello</p>
</div>
</div>
CSS
.wrapper {
display: flex;
flex-flow: row wrap;
width: 500px;
}
.card {
flex-basis: 50%;
}
img {
max-width: 150px;
}
答案 2 :(得分：0)
您可以像这样使用flex：
img {
max-width: 100%;
}
.container {
display: flex;
width: 100%;
flex-flow: wrap;
}
.container .item {
flex: 0 0 50%;
padding: 15px;
box-sizing: border-box;
}<div class="container">
<div class="item">
<img src="https://lorempixel.com/400/200" />
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="item">
<img src="https://lorempixel.com/400/200" />
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="item">
<img src="https://lorempixel.com/400/200" />
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="item">
<img src="https://lorempixel.com/400/200" />
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
</div>
答案 3 :(得分：0)
我使用CSS flex（MDN documentation + A complete guide to flex box）来满足您的要求。我还在css中添加了一些注释来解释给定规则的作用。
/* your website container */
.container {
width: 30em; /* width of your website */
/* added a border to indicate the website space, just for presentation purpose */
border: 1px solid red;
}
/* this style determines the appearance of the container that consists all your boxes */
.tutorials {
display: flex;
width: 20em;
flex-flow: wrap;
margin: 0 auto; /* centers this box to your website container */
}
/* this style determines the appearance of each boxes */
.box {
height: 15em;
/* ensures that there is some white space in your box */
padding: 0.6em 0.4em;
flex: 0 0 50%;
box-sizing: border-box;
}
/* this style determines the appearance of the image in the box */
.box img {
width: 100%;
margin-bottom: 0.5em;
}
/* this style determines the appearance of the text below your image */
.box p {
font-size: 18px;
text-align: center;
/* centers the text towards the box */
}
.container .item {}<div class="container">
<div class="tutorials">
<div class="box">
<img src="http://assets1.tribesports.com/system/challenges/images/000/025/490/original/20120823035328-random-challenge-generator.jpg" alt="Panda" height="100" width="100">
<p>Your text here</p>
</div>
<div class="box">
<img src="https://hackster.imgix.net/uploads/cover_image/file/170541/dice1.jpg?auto=compress%2Cformat&w=600&h=450&fit=min" alt="Paper" height="100" width="100">
<p>Your text here</p>
</div>
<div class="box">
<img src="http://5found.com/images/2012/04/Random-number-generator.png" alt="Santa" height="100" width="100">
<p>Your text here</p>
</div>
<div class="box">
<img src="http://payload23.cargocollective.com/1/6/200664/2775040/Screen%20Shot%202012-01-20%20at%2013.52.19.png" alt="Swan" height="100" width="100">
<p>Your text here</p>
</div>
</div>
<div>
<p>Another stuff</p>
</div>
</div>
答案 4 :(得分：0)
试试这个：
.parent{
display:inline-block;
width:100%;
}
.child{
width:50%;
float:left;
margin-bottom:10px;
display:block;
}
.child p {
padding: 10px;
margin: 0;
}
.child img{
max-width:95%;
}<div class="parent">
<div class="child">
<img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="child">
<img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="child">
<img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="child">
<img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
答案 5 :(得分：0)
你也可以尝试：
<figure class="box">
<img src="some_image.png" alt="Image" height="100" width="100">
<figcaption>Some text</figcaption>
</figure>