三个div在同一行

最新推荐文章于 2024-07-09 23:24:46 发布
最新推荐文章于 2024-07-09 23:24:46 发布
阅读量509 收藏
点赞数
分类专栏： css 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yz1234/article/details/83527310
版权
<style type="text/css">

*{ margin:0; padding:0;}
body{ font:12px Verdana, Arial, Helvetica, sans-serif;}
ul{ list-style:none;}

.menu{ width:949px; margin:0 auto; overflow:hidden;}
.outer{ background:#0000C6 no-repeat top left; margin-top:10px; padding-left:15px;}
.inner{ background:#AFCB2E no-repeat top right; padding-right:5px; width:50%px;}
.menu ul{ background:#AFCB2E repeat-x 0 -102px; height:34px; }
.menu li{ float:left; width:auto !important; width:1%; white-space:nowrap; padding:0 5px; background:#AFCB2E no-repeat bottom left;}
.menu li a{ display:block; text-decoration:none; padding-left:15px; cursor:pointer;}
.menu li a span { display:block;height:34px; line-height:34px; color:white; padding-right:15px;}

.menu li a:hover { background:#0AEAEF no-repeat left -68px;}
.menu li a:hover span { background:#0AEAEF no-repeat right -68px;}

.menu li.selected a { background:#DC6DB3 no-repeat left -34px;}
.menu li.selected a span { background:#DC6DB3) no-repeat right -34px; color:red;}

</style>
<script type="text/javascript" src="JQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="JQuery/menu.js"></script>
</head>

<body>
<div class="menu outer">
<div class="inner">
<ul>
<li class="selected" style="background:none;"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">百姓民声</a></li>

</ul>
</div>
<div style="position:absolute;top:10;right:1%;width:50%; height:34px; background-color:#999933; text-align: right">aaaaaaasdfsdfaaaaaaa</div>
</div>
yz1234
关注
专栏目录
实现一个行内三个div等分_一个div，包含三个小的div,平均分布的样式
weixin_39551996的博客
12-19 3782
从11月份开始，自学前端开发，写静态页面中，经常用到一个大的div下包含三个小的div,平均分布div大小样式，写过多次，也多次忘记，每次都要现找资料，不想之后，在这么麻烦，索性今天自己记录一下，方便后面用的好找。写出的效果如图：html：....XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXCss:.bigdiv{width:1420px;position:relative;ove...
html三个div水平对齐,Html和CSS我如何对齐3个div并排
weixin_29372549的博客
06-08 1678
所有在同一行裹的元素在一个包装的div元素：firstsecondthird然后设置包装纸的宽度和浮法所有三个div S：#wrapper {width:700px;clear:both;}#first {background-color:red;width:200px;float:left;}#second {background-color:blue;width:300px;float:lef...
CSS：三个div放在一排
tiandaochouqin_1的博客
02-28 7624
&lt;div&gt; 1 &lt;/div&gt; &lt;div&gt; 2&lt;/div&gt; &lt;div&gt; 3&lt;/div&gt; 方法一：div{display:inline-block;} &lt;!--不过div之间有空隙，并且不方便处理--&gt; 方法二：div{float:left;} &lt;!--div之间无空隙--&gt;
实现三个div同一行显示，IE6 and Ie7 :display:inline-block
u012767697的专栏
01-15 842
IE6、IE7不支持display:inline-block div { display:inline-block; *display:inline; *zoom:1; } display:inline-block;和*display:inline;的顺序不要颠倒哦！ 代码如下： 第一种:使用display:inline-block
HTML内嵌CSS让三个DIV并列在一行中
Captain的专栏
12-17 538
DIV内嵌CSS： <div style="width:98%;margin:auto;"> <div style="width:30%;height:300px;background-color:rgb(145, 176, 145);float:left;">111</div> <div style="width:40%;height...
3个同一行div的摆放div
weixin_30791095的博客
08-29 144
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta...
让多个div在同一行显示的样式及html代码
09-25
在网页设计中，常常需要将多个div元素在同一行内排列显示，以便布局的美观性和内容的逻辑性。从提供的文件信息来看，文档旨在展示如何使用CSS样式和HTML代码让多个div在同一行显示，并提供了具体的代码示例供初学者...
CSS控制图片和文字在同一行显示且对齐的3种方法
09-25
本文将详细介绍三种CSS方法来解决这个问题，确保图片和文字在同一行对齐。 1. **使用`vertical-align: middle`属性** 这种方法适用于图片和文字都在同一个元素（如`<div>`）中的情况。通过设置`vertical-align: ...
html使多个<div>在同一行
06-01
可以使用 CSS 中的 `display: inline-block` 或 `float: left` 属性来实现多个 `<div>` 元素在同一行...这样就可以让三个 `<div>` 元素在同一行显示了。注意要设置父元素的 `white-space` 属性为 `nowrap`，防止换行。
div同行显示_三个div同行显示
weixin_29248611的博客
12-23 2204
今天记录的是css布局的一些经验。对于三个div同行显示的问题，在网页的制作中有很多的应用。比如圆角矩形的导航效果。和一些网站的内页等都需要三个div同行显示。例如今天做的这个效果↓↓↓↓↓↓↓↓左右两边都是一张图片，中间是文字或者其他元素。类似这样的效果，基本上都可以归属于三个div同行显示的问题。那么，如何让三个div同行显示呢？方法很简单，就是让三个div 都左浮动，同时设置三个div的长度...
三个div同行显示
weixin_30481087的博客
08-20 297
今天记录的是css布局的一些经验。 对于三个div同行显示的问题，在网页的制作中有很多的应用。比如圆角矩形的导航效果。和一些网站的内页等都需要三个div同行显示。 例如今天做的这个效果↓↓↓↓↓↓↓↓ 左右两边都是一张图片，中间是文字或者其他元素。类似这样的效果，基本上都可以归属于三个div同行显示的问题。 那么，如何让三个div同行显示呢？方法很简...
将多个DIV放在一行显示的三种方法（超简洁，一目了然）
qq_37967853的博客
11-08 1万+
将多个DIV放在一行显示的三种方法（超简洁，一目了然）
float 多个div在同一行
zhouyong0的专栏
04-12 7728
<br />float：<br />在前面元素显示后的情况下（向前面找border margin  pading），向某个方向浮动，它并不占位置，但是在同一容器下，文字会围绕float元素<br /> <br />多个div在同一行<br />方案1绝对定位<br />现在写成这样：<br /> <div style="position:relative;height:100px"><br />   <div  style="position:absolute;top:0;left:0;width:5
多个div放到同一行的方法——html中的页面布局
最新发布
weixin_64294248的博客
07-09 2830
在HTML的排版设计中可能会遇到div不能为一行的情况，本文介绍了三种解决方法，提供了大致的思路，代码还有更好的优化措施。
css 实现三个 div 等分排在一行
且听风吟的博客
11-15 1万+
（1）box-sizing: border-box;实现： <!DOCTYPE html> <html> <head> <title>border-box 实现三个div等分排在一行</title> <style> *{ padding:0; margin:0; } .container { ...
三个div元素在同一行靠右排列
热门推荐
Web魔法师
02-06 2万+
首先，定义一个大的div包括这三个div，这个大的div属性设置 然后，把左边和中间的div设置为，把最右边的div设置成： 经过上面设置，即可把三个div排列在同一行。 源代码如下：                         创建任务             创建版本任务             创建其他任务                  
学习杂记（如何让两个div在同一行）
weixin_30872789的博客
11-26 842
时不时会要记着一些东西，以防自己忘记总结。 CSS浮动 div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。 在div的标准流中，无论div多小，它都独占一行，相互没有交集。 但是很多地方要使两个或者多个div处于一行，这时候要对操作div设置浮动属性。设置浮动后就不再属于标准流，成为一个新的流。又因为浮动是漂浮在标准流之上的。所以刚设置会出现下图情况。（div...
3个div同行等比显示
yijiupingfan0914的博客
04-19 759
&lt;style&gt; #wraper{ width:100%; height:100px; } .div{ float:left; width:75px; height:50px; border:1px solid bisque; margin:auto 10px; } /*第一种方法结束*/ #a{ width...
【CSS】三个DIV在同一行平分宽度的五种实现方法
cherry__yu的博客
04-11 2086
- --> 来紧邻连接这些元素。此外，将 .container 的 font-size 设置为 0，然后再为 .inline-block-div 重置 font-size，也是为了去除元素间的空隙。你可以通过将父容器的 display 属性设置为 grid 并使用 grid-template-columns 来指定列的数量和宽度，来在同一行内平均分布三个 div 元素。将父容器的 display 设置为 flex，将子元素的 flex 都设为1 来平分空间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值