div不换行的三种方法

float

<div class="div1">123</div>
<div class="div2">456</div>
<style>
.div1 {
float: left;
}
.div2 {
float: left;
}
</style>

inline-block

<div class="div1">123</div>
<div class="div2">456</div>
<style>
.div1 {
display: inline-block;
}
.div2 {
display: inline-block;
}
</style>

flex

<div class="parent">
<div class="div1">123</div>
<div class="div2">456</div>
</div>
<style>
.parent {
display: flex;
}
</style>

原文地址:https://www.cnblogs.com/zouwangblog/p/11149621.html

时间: 2024-11-14 13:11:02

div不换行的三种方法的相关文章

PHP替换回车换行的三种方法

一个小小的换行,其实在不同的平台有着不同的实现,为什么要这样,世界是多样的! 本来在Unix世界换行用/n来代替换行, Windows为了体现不同,就用/r/n, 更有意思的是,Mac中又用了/r. 所以,写的程序在不同的平台上,有着不少的麻烦,比如要替换换行符. 第一种方式 str_replace(array("/r", "/n", "/r/n"), "", $string); 第二种方式,就用正则表达示 $str = pr

实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding:

Linux更新内核的三种方法

Centos内核升级的三种方法 在基于CentOS平台的工作过程中,难免有时需要升级或者降级内核以验证功能.调试性能或者更新整个系统.如果从头重新编译一个内核,由于现在内核特性越来越复杂,依赖的库或者工具也不少,加之重新编译耗时不菲,了解更新内核的多种方式就显得尤为必要.下面根据笔者最近的工作,总结了三种方法,供大家参考. 方法一 如果机器不能联网,可以下载现有内核包到本地机器,直接在本地更新 1.从http://ftp.scientificlinux.org/linux/scientific/

让一个元素垂直水平居中的三种方法

第一种方法: div.box{ weight:200px; height:400px; <!--把元素变成定位元素--> position:absolute; <!--设置元素的定位位置,距离上.左都为50%--> left:50%; top:50%; <!--设置元素的左外边距.上外边距为宽高的负1/2--> margin-left:-100px; margin-top:-200px; } *兼容性好;缺点:必须知道元素的宽高 ------------- 第二种方法:

CSS实现导航条Tab切换的三种方法

前面的话 ??导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 ??根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局 [语义布局] ??从语义布局的角度来看,每一个导航标题和其对应的导航内容应该是一个整体 <style> body,p{margin: 0;} h2{margin: 0;font-size:100%;} ul{margin: 0;padding: 0;li

让一个元素垂直水平居中的三种方法【转】

第一种方法: div.box{ weight:200px; height:400px; <!--把元素变成定位元素--> position:absolute; <!--设置元素的定位位置,距离上.左都为50%--> left:50%; top:50%; <!--设置元素的左外边距.上外边距为宽高的负1/2--> margin-left:-100px; margin-top:-200px; } *兼容性好;缺点:必须知道元素的宽高 ------------- 第二种方法:

css清除浮动float的三种方法总结【转载自https://my.oschina.net/leipeng/blog/221125】

摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3

jquery 点击显示隐藏的三种方法

jquery点击显示隐藏的三种方法,从复杂到简单.使用jquery需要引用jquery库,如右所示<script src="jquery-1.11.3.min.js"type="text/javascript"></script>. 旁边按钮随着收缩展开发生状态变化,展开+变—,收缩—变+. 收缩效果: 展开效果: 一.HTML结构(盗用网上的) <body> <!-- 收缩展开效果 --><li class=&

用旭日图展示数据的三种方法

什么是旭日图? 旭日图(Sunburst Chart)是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况.旭日图中,离远点越近表示级别越高,相邻两层中,是内层包含外层的关系. 在实际项目中使用旭日图,可以更细分溯源分析数据,真正了解数据的具体构成.而且,旭日图不仅数据直观,而且图表用起来特别炫酷,分分钟拉高数据汇报的颜值!很多数据场景都适合用旭日图,比如,在销售汇总报告中,方便看到每个店铺的销售业绩分布(如下图): 做旭日图的三种方法 1. 用E