那些遇到过的问题

如何使我的图像标题网格与不同大小的文本内容正确浮动

dav*_*vvv 5 css css3 css-float

我在这里有一个问题,如果标题太长,如果它超出一行,则会导致后面的元素无法正确浮动.我想拥有它,所以无论标题的内容如何,​​下一行都会调整到空格.我看到另一个网站实现了非常相似的东西.

我无法解决我需要的其他问题. 

body {
	padding: 0;
	margin: 0 auto;
}
.container:after, .group:before, .group:after, .clearfix:before, .clearfix:after, .row:before, .row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.container:after, .row:after, .clearfix:after, .group:after {
	clear: both;
}
.row, .clearfix, .group {
	zoom: 1;
}
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body, html {
	height: 100%;
}
body {
	color: #000;
	background: #FFF
}
.column {
	float: left;
	display: block
}
.constraint {
	padding-right: 2%;
	padding-left: 2%;
	margin-right: auto;
	margin-left: auto;
	width: 100%
}
.col-4 {
	width: 33.33333333%
}
.columns {
	padding-left: 25px;
	padding-right: 25px	
}
.row {
	max-width: 100%;
	margin: 0px auto;
	width: auto
}
.picture {
	height: 0;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat	
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
	padding-bottom: 65%	
}
section#projects .picture.portrait {
	padding-bottom: 75%;
	background-position: inherit	
}
.project-thumbnail {
	margin-bottom: 80px;
	margin-bottom: 3rem;
  overflow: hidden
}
Run Code Online (Sandbox Code Playgroud) 
  <div class="constraint">
    <section id="projects"> 
      <!-- Row -->
      <div class="row"> 
        <!-- Project previews -->
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
      </div>
    </section>
  </div>
Run Code Online (Sandbox Code Playgroud)

CSS技巧说:

溢出方法依赖于在父元素上设置溢出CSS属性.如果此属性在父元素上设置为auto或hidden,则父级将展开以包含浮动

读这个,我设置容器div.project-thumbnail,但没有变化:

.project-thumbnail {
  overflow: auto
}
Run Code Online (Sandbox Code Playgroud)

的jsfiddle

编辑

正如评论所示,设置标题div的高度div.thumb将使其正确浮动.固定的高度会切断变得太大的内容.添加overflow: auto到这个div只会添加一个滚动条,这不是我想要的.

编辑

这个网站在这里也有类似的系统.具有宽度的项目是浮动的,没有行分隔符,但如果div中的内容超出几行,则div的底部将调整,整齐地对齐下一行​​.

use*_*632 2

第一个解决方案

这就是您正在寻找的内容，您只需在 css 中添加一条规则，

.row article:nth-child(3n+1){
    clear: left;
}
Run Code Online (Sandbox Code Playgroud) 

.row article:nth-child(3n+1){
    clear: left;
}
Run Code Online (Sandbox Code Playgroud) 
.row article:nth-child(3n+1){
	clear: left;
}
body {
	padding: 0;
	margin: 0 auto;
}
.container:after, .group:before, .group:after, .clearfix:before, .clearfix:after, .row:before, .row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.container:after, .row:after, .clearfix:after, .group:after {
	clear: both;
}
.row, .clearfix, .group {
	zoom: 1;
}
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body, html {
	height: 100%;
}
body {
	color: #000;
	background: #FFF
}
.column {
	float: left;
	display: block
}
.constraint {
	padding-right: 2%;
	padding-left: 2%;
	margin-right: auto;
	margin-left: auto;
	width: 100%
}
.col-4 {
	width: 33.33333333%
}
.columns {
	padding-left: 25px;
	padding-right: 25px	
}
.row {
	max-width: 100%;
	margin: 0px auto;
	width: auto
}
.picture {
	height: 0;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat	
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
	padding-bottom: 65%	
}
section#projects .picture.portrait {
	padding-bottom: 75%;
	background-position: inherit	
}
.project-thumbnail {
	margin-bottom: 80px;
	margin-bottom: 3rem;
  overflow: hidden
}
Run Code Online (Sandbox Code Playgroud)

第二种解决方案：内联块显示

流畅、可扩展、易于掌握

我更喜欢这个解决方案，使用display:inline-block它很简单，并且现在在 IE 上运行得很好。唯一的缺点是标记之间的空白（我选择在此处删除它们）。

我刚刚擅自修改了您的代码，以便您可以找到修改的内容。

<div class="constraint">
    <section id="projects"> 
      <!-- Row -->
      <div class="row"> 
        <!-- Project previews -->
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
      </div>
    </section>
  </div>
Run Code Online (Sandbox Code Playgroud) 
body {
	padding: 0;
	margin: 0 auto;
}
.container:after, .group:before, .group:after, .clearfix:before, .clearfix:after, .row:before, .row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.container:after, .row:after, .clearfix:after, .group:after {
	clear: both;
}
.row, .clearfix, .group {
	zoom: 1;
}
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body, html {
	height: 100%;
}
body {
	color: #000;
	background: #FFF
}
.column {
	display: inline-block;
	vertical-align: top;
}
.constraint {
	padding-right: 2%;
	padding-left: 2%;
	margin-right: auto;
	margin-left: auto;
	width: 100%
}
.col-4 {
	width: 33.33333333%
}
.columns {
	padding-left: 25px;
	padding-right: 25px	
}
.row {
	max-width: 100%;
	margin: 0px auto;
	width: auto
}
.picture {
	height: 0;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat	
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
	padding-bottom: 65%	
}
section#projects .picture.portrait {
	padding-bottom: 75%;
	background-position: inherit	
}
.project-thumbnail {
	margin-bottom: 80px;
	margin-bottom: 3rem;
  overflow: hidden
}
Run Code Online (Sandbox Code Playgroud)

第三种解决方案：网格布局

非常酷、强大的现代 CSS 功能，您可以在这里获取更多信息

<div class="constraint">
    <section id="projects"> 
      <!-- Row -->
      <div class="row"> 
        <!-- Project previews -->
        <article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview with some content that makes it extend onto another line.</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article><article class="project-thumbnail col-4 columns column">
            <div class="picture portrait" style="background-image:url('http://images.all-free-download.com/images/graphiclarge/hd_sky_picture_05_hd_pictures_166299.jpg'); background-position: 50%"> </div>
             <div class="thumb">
               <h3 class="thumb-title">Box One</h3>
               <p class="thumb-description">Item preview</p>
             </div>
        </article>
      </div>
    </section>
  </div>
Run Code Online (Sandbox Code Playgroud) 
body {
	padding: 0;
	margin: 0 auto;
}



body, html {
	height: 100%;
}
body {
	color: #000;
	background: #FFF
}

.constraint {
	/*! padding-right: 2%; */
	/*! padding-left: 2%; */
	margin-right: auto;
	margin-left: auto;
	width: 100%;
}
.col-4 {
	/*! width: 33.33333333% */
}
.columns {
	padding-left: 25px;
	padding-right: 25px;	
}
.row {
	max-width: 100%;
	margin: 0px auto;
	width: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.picture {
	height: 0;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat	
}
.thumb,
.thumb-title,
.thumb-description {
  margin-bottom: 1rem
}
.picture.portrait {
	padding-bottom: 65%	
}
section#projects .picture.portrait {
	padding-bottom: 75%;
	background-position: inherit	
}
.project-thumbnail {
	margin-bottom: 80px;
	margin-bottom: 3rem;
}
Run Code Online (Sandbox Code Playgroud)

  • 到目前为止，网格解决方案更加优雅。如果OP可以的话，这绝对是可行的方法。这里关于何时开始和后备的好文章 --&gt; https://rachelandrew.co.uk/archives/2017/07/04/is-it-really-safe-to-start-using-css-grid-layout/ (2认同)

归档时间：

查看次数：

231 次

最近记录：

8 年，5 月 前
相关归档
如何防止表格单元格中的文本换行 272
如何从特定PrimeFaces删除边框p:panelGrid？ 57
指定的宽度百分比,但想要以像素为单位 51
垂直对齐复选框标签？ 27
如何在表格的tbody/thead部分周围创建边框？ 16
如何更改特定输入字段的占位符颜色？ 11
CSS:如何定位表中的特定单元格？ 9
为什么CSS3Pie + Prototype 1.6.1会使Internet Explorer 8崩溃 6
如何在span标签中使用CSS nth-child？ 4
为nth-child和nth-of-type指定任意子项列表(无模式) 3
难疑归档
基于表单的网站身份验证的权威指南 5311
如何检查文件是否存在而没有例外？ 5290
如何更改远程Git存储库的URI(URL)？ 3529
静态类变量是否可能？ 1824
StringBuilder和StringBuffer之间的区别 1510
在jQuery中创建div元素 1500
JavaScript发布请求,如表单提交 1465
在JavaScript对象数组中按id查找对象 1435
在YAML中,如何在多行中断字符串？ 1388
让Chrome接受自签名的localhost证书 1080