flex列表数据超出换行

宏-

已于 2025-03-11 15:40:02 修改

阅读量920

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： elementui linq eureka

于 2022-02-18 16:45:24 首次发布

本文链接：https://blog.csdn.net/mmd1234520/article/details/123006828

vue 专栏收录该内容

10 篇文章

订阅专栏

这是一个使用HTML和CSS构建的IP列表展示页面示例。代码中定义了一个`.ip_list_main`容器，使用flex布局展示多个`.ip_list_box`元素，每个元素包含IP名称和标语，并设置适当的间距和响应式调整。CSS部分详细规定了各个元素的样式，如图片大小、文字颜色、间距等，确保列表的美观和易读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html部分

<div style="" class="ip_list_main">
				<div style="" class="ip_list_box">
					<img src="./img/allNewsList/allNewsList_2.png" class="ip_list_img" style="" alt="" srcset="">
					<div style="" class="list_text_padding">
						<div class="list_text_flex" style="">
							<div class="list_text_flex_column" style="">
								<span class="list_text_1" style="">IP名称</span>
								<span class="list_text_2" style="">IP对应标语</span>
							</div>
							<div>
								<img src="./img/ipImg.png" class="toipImg" style="" alt="" srcset="">
							</div>
						</div>

					</div>
				</div>
                
				<div style="" class="ip_list_box">
					<img src="./img/allNewsList/allNewsList_2.png" class="ip_list_img" style="" alt="" srcset="">
					<div style="" class="list_text_padding">
						<div class="list_text_flex" style="">
							<div class="list_text_flex_column" style="">
								<span class="list_text_1" style="">IP名称</span>
								<span class="list_text_2" style="">IP对应标语</span>
							</div>
							<div>
								<img src="./img/ipImg.png" class="toipImg" style="" alt="" srcset="">
							</div>
						</div>
				
					</div>
				</div>
				
				<div style="" class="ip_list_box">
					<img src="./img/allNewsList/allNewsList_2.png" class="ip_list_img" style="" alt="" srcset="">
					<div style="" class="list_text_padding">
						<div class="list_text_flex" style="">
							<div class="list_text_flex_column" style="">
								<span class="list_text_1" style="">IP名称</span>
								<span class="list_text_2" style="">IP对应标语</span>
							</div>
							<div>
								<img src="./img/ipImg.png" class="toipImg" style="" alt="" srcset="">
							</div>
						</div>
				
					</div>
				</div>
				
				<div style="" class="ip_list_box">
					<img src="./img/allNewsList/allNewsList_2.png" class="ip_list_img" style="" alt="" srcset="">
					<div style="" class="list_text_padding">
						<div class="list_text_flex" style="">
							<div class="list_text_flex_column" style="">
								<span class="list_text_1" style="">IP名称</span>
								<span class="list_text_2" style="">IP对应标语</span>
							</div>
							<div>
								<img src="./img/ipImg.png" class="toipImg" style="" alt="" srcset="">
							</div>
						</div>
				
					</div>
				</div>
				
				<div style="" class="ip_list_box">
					<img src="./img/allNewsList/allNewsList_2.png" class="ip_list_img" style="" alt="" srcset="">
					<div style="" class="list_text_padding">
						<div class="list_text_flex" style="">
							<div class="list_text_flex_column" style="">
								<span class="list_text_1" style="">IP名称</span>
								<span class="list_text_2" style="">IP对应标语</span>
							</div>
							<div>
								<img src="./img/ipImg.png" class="toipImg" style="" alt="" srcset="">
							</div>
						</div>
				
					</div>
				</div>
				<div style="" class="ip_list_box">
					<img src="./img/allNewsList/allNewsList_2.png" class="ip_list_img" style="" alt="" srcset="">
					<div style="" class="list_text_padding">
						<div class="list_text_flex" style="">
							<div class="list_text_flex_column" style="">
								<span class="list_text_1" style="">IP名称</span>
								<span class="list_text_2" style="">IP对应标语</span>
							</div>
							<div>
								<img src="./img/ipImg.png" class="toipImg" style="" alt="" srcset="">
							</div>
						</div>
				
					</div>
				</div>


			</div>

2.css部分

/* ip列表样式 */
			.ip_list_main {
				margin-top: 30px;
				display: flex;
				flex-wrap: wrap;
				
			}
			
			.ip_list_main:after{ //这段代码一定要加
					content: "";
					flex: auto;
				}

			.ip_list_box {
				width: 255px;
				background: #232A46;
				border-radius: 6px;
				cursor: pointer;
				margin-right: 20px; //这个是重点，设置水平间距
				margin-bottom: 30px; //这个是设置上下间距
			}
			
			.ip_list_box:nth-child(4n){  //列表有4个就写4n
				
				margin-right: 0px;
			}

			.ip_list_img {
				width: 100%;
				height: 170px;
			}

			.list_text_padding {
				padding: 13px 20px;
			}

			.list_text_flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.list_text_flex_column {
				display: flex;
				flex-direction: column;
			}

			.list_text_1 {
				font-size: 16px;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 22px;
				width: 174px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.list_text_2 {
				font-size: 14px;
				font-weight: 400;
				color: #BAC5EE;
				line-height: 20px;
				width: 174px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.toipImg {
				width: 25px;
				height: 25px;
			}

			.ip_tip_main {
				margin-top: 50px;
				display: flex;
				align-items: center;
			}

			.detailLine_png {
				width: 4px;
				height: 22px;
			}

			.ip_tip_text {
				font-size: 22px;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 30px;
				margin-left: 14px;
			}

			/* ip列表样式 */