学习CSS浮动知识 & 做个简单对话框

程序员文章站 2022-06-23 12:28:11

浮动以三个div为例，如果直接运行，会从上至下排列。效果如下：那么如何让图片乖乖的从左到右排列呢？我们利用float，即浮动布局。div{float:left; /*左浮动*/}效果如下：若要让三者中间有间隔呢？可利用margindiv{float:left; /*左浮动*/ margin: 10px;}效果如下：下面制作出一个简单的聊天对话框，利用列表：html 文件：

浮动

以三个div为例，如果直接运行，会从上至下排列。
效果如下：
学习CSS浮动知识 & 做个简单对话框
那么如何让图片乖乖的从左到右排列呢？
我们利用float，即浮动布局。

div{
	float:left; /*左浮动*/
}

效果如下：
学习CSS浮动知识 & 做个简单对话框
若要让三者中间有间隔呢？
可利用margin

div{
	float:left;  /*左浮动*/
    margin: 10px;
}

效果如下：
学习CSS浮动知识 & 做个简单对话框

浮动元素的重叠问题

浮动元素不会覆盖文字内容；
浮动元素不会覆盖图片内容；
浮动元素不会覆盖表单（输入框，单选按钮，下拉选择等）内容。

聊天对话框制作

下面制作出一个简单的聊天对话框，利用浮动和列表：

html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天对话框</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <p>
        聊天对话框
    </p>
    <div id="box">
        <ul>
            <li class="one">你好</li>
            <li class="two">你也好</li>
            <li class="one">吃饭了吗</li>
            <li class="two">吃了</li>
            <li class="one">吃的什么</li>    
            <li class="two">你吃的什么</li>           
            <li class="one">我没吃</li>
            <li class="two">奥</li>      
            <li class="one">那你吃的什么</li>
            <li class="two">海鲜，牛排，炸鸡，烤串，冰淇淋，寿司...</li>
            <li class="one">再见</li>
        </ul>
    </div>   
</body>
</html>

css 文件：

ul {                                /*设置聊天边框*/
    width: 400px;
    height: 800px;
    border-width: 1px;              /*边框宽度为 1 像素*/
    border-style: solid;            /*边框为实线*/
    border-color: royalblue;        /*边框颜色*/
    margin: auto;                   /*居中*/
    padding: 0 ;
}

li {
    margin: 10px 0;                 /*每句话上下间隔为10像素*/
    line-height: 40px;
    background-color: skyblue;
    list-style: none;               /*列表前无修饰*/
}

.one {
    float: left;                    /*左浮动*/
    margin-left: 20px;
    clear: right;                   /*清除右浮动*/
}

.two {
    float: right;
    margin-right: 20px;
    clear: left;
}

p {
    font-size: large;
    font-weight: bolder;
    text-align: center;
    color: royalblue;
}

效果如下：
学习CSS浮动知识 & 做个简单对话框

本文地址：https://blog.csdn.net/Web_blingbling/article/details/107465074