CSS中父div中overflow和子div中float的用法

前言

本人在项目中遇到显示user列表信息时需要显示如下图所示的效果,因此学习了css样式中overf和float的简单使用。
CSS中父div中overflow和子div中float的用法_第1张图片

需求描述:如何把一个单元的内容信息显示在一行,并且可以控制一行有几个单元。

一个例子

<div class="container ">                 
   <div class="fruit">           
      <div>苹果div>  
      <div>橘子div>  
      <div>栗子div>  
      <div>香蕉div>  
      <div>葡萄div>  
      <div>橙子div>  
      <div>南瓜div>  
      <div>番茄div>    
   div>      
div>  

经过查阅相关资料,给div元素添加样式如下:

.container {
            width:600px;
            line-height:120%;
            border:1px solid #CC6600; 
            margin-bottom:8px;
        }
.fruit div{
            float: left;
                        width: 150px;
                        height: 120px;
                        margin: 20;
                        border: 1px solid rgba(0, 0, 0, .3);
                        border-radius: 10px;
        }

页面会出现:
CSS中父div中overflow和子div中float的用法_第2张图片
这时会出现父级元素高度无法自适应的问题?
我们可以利用利用overflow属性解决子元素float浮动后父级元素高度无法自适应。
完整代码如下:

<html>
<head>
    <style>
        .container {
            width:600px;
            line-height:120%;
            border:1px solid #CC6600; 
            margin-bottom:8px;
        }
        .fruit{
            overflow: auto;
        }
        .fruit div{
            float: left;
                        width: 150px;
                        height: 120px;
                        margin: 20;
                        border: 1px solid rgba(0, 0, 0, .3);
                        border-radius: 10px;
        }
    style>
head>

<body>
<div class="container ">                 
   <div class="fruit">           
      <div>苹果div>  
      <div>橘子div>  
      <div>栗子div>  
      <div>香蕉div>  
      <div>葡萄div>  
      <div>橙子div>  
      <div>南瓜div>  
      <div>番茄div>    
   div>      
div>  
body>
html>

显示效果:
CSS中父div中overflow和子div中float的用法_第3张图片
可以看到解决了父元素高度不适应问题。
那么我们要设置每行显示多少个子元素内容呢?
只需要设置父元素的width属性即可,例如:我们让每行显示四个元素。width:800px。

.container {
            width:800px;
            line-height:120%;
            border:1px solid #CC6600; 
            margin-bottom:8px;
        }

显示效果:
CSS中父div中overflow和子div中float的用法_第4张图片

本文在实际开发中遇到问题,然后记录了下来。希望能给读者带来帮助!

你可能感兴趣的:(js学习笔记,css笔记)