Question

我正在使用弹性框创建一个图像布局，并尝试在页面调整大小时使已落下的图像与列对齐而不是在它们下方居中。我可能会在图像上放'*'}但是没有任何反应。我在这做错了什么？什么都有帮助，谢谢！

float:left;

/*Fonts*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);

/*Body*/
body {
	font-family: "Open Sans", Arial, sans-serif;
	background-color: #fefefe;
	padding-bottom: 3rem;}

/*Profile Picture*/
.profile-picture {
  display: flex;
  margin-top: 55px;
  margin-bottom: 35px;
  display: inline-block;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #f1f1f1;}
.image {
  background-image: url('https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1');}

/*Profile Name*/
.profile-name {
  text-align:center; 
  margin-top:-20px; 
  margin-bottom:35px; 
  font-weight:bold;}

/*User Name*/
.user-name {
  text-align:center; 
  margin-top:-30px; 
  margin-bottom:35px; 
  color:rgba(1,1,1,0.35);}

/*Follow Button*/
.follow-button-position {
  text-align:center;
  margin-bottom:55px;
  margin-top:-10px;}
.follow-button {
  text-align:center;
  padding-top:7.5px;
  padding-bottom:7.5px; 
  padding-left:25px; 
  padding-right:25px;
  border-radius:2px;
  background-color:rgba(1,1,1,0); 
  border-style:solid; 
  border-color:#af985a; 
  border-width:1px;
  color:#af985a;}
.follow-button:hover {
  cursor:pointer;}

/*Posts*/
.flex-container {
  display: flex;
  justify-content: center;
flex-wrap: wrap;}

img {
    max-width:270px;
  height:auto;
padding:15px;}

Answer 1

将proc print data=TABLES.&tbl noobs label split="*"; var label_ c1_STAT1 c2_STAT1 c12_stat c3_STAT1 c4_STAT1 c34_stat c5_STAT1 c6_STAT1 c56_stat ; * labeling step creates column header detail ; label %do i=1 %to &num; c&i._STAT1 = "&&&c&i.lab. * N= &&cohort&i._tot. * N" %end; c12_stat = "* * * % of row" c34_stat = "* * * % of row" c56_stat = "* * * % of row" ; run;更改为justify-content: center;并从那里使用margin-left。

通常容器会有一些填充

Answer 2

或者，您甚至可以使用css网格进行响应式图像布局，而css代码更少。

.container {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-template-rows: repeat(5,minmax(200px,1fr));
}
.container > div > img{
    object-fit: cover;
    width:100%;
    height: 100%;
}

<body>
        <div class="container">
           
  <div>
<img src="https://www.dropbox.com/s/4c05cegbonfqo5k/Photo%202018-03-03%2C%202%2020%2022%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  

        </div>
    </body>

Answer 3

你可以添加另一个div .flex-container-wrap并给他与.flex-container相同的样式但是更改justify-content：center;进入理由 - 内容：flex-start;。希望这能解决你的问题。

＆＃13;

.flex-container {
  display: flex;
  justify-content: center;
flex-wrap: wrap;}

.flex-container-wrap {
  display: flex;
  justify-content: flex-start;
flex-wrap: wrap;}

img {
    max-width:270px;
  height:auto;
padding:15px;}

＆＃13;

<div class="flex-container">
  <div class="flex-container-wrap">
  <div>
<img src="https://www.dropbox.com/s/4c05cegbonfqo5k/Photo%202018-03-03%2C%202%2020%2022%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
  <div><img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"></div>
  
</div>
</div>

＆＃13;

Flexbox图像布局列

3 个答案: