CSS布局技巧详解-优快云博客

本文链接：https://blog.youkuaiyun.com/love_gaohz/article/details/46042541

本文介绍了CSS中的inline-block特性，展示了如何实现div之间的相对与绝对定位，并提供了一个使用float实现的简单左右布局示例。

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

1.这表明相关的图像呈现为 inline-block。当您把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。

2.div相对与另一div绝对定位

有几个方法:
一种:
div1设置为position:relative，
div2设置为position:absolute，
此时的div2就相对于div1进行基准定位了。。。
因为绝对定位position:absolute，不在标准流中，所以内联元素不知到他的位置，会跑到他的下面去。。。这里就看你需要什么样式了，如果简单的可以用padding和margin配合完成，让内联元素出来。。但屏幕缩小放大就变形了。。
二种，
就是你改写一下你的HTML
<div id="div1">
<div id="div2"></div>
</div>
把div2放到div1里面，里面设置为float，再position:relative进行浮动后地位，

这种方法比第一种好，这里看你的需求了///

3.Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

4.一个简单左右布局的CSS文字和图片排版

<textarea readonly="readonly" name="code" class="c++">
<html>
<head>
<title>左右布局的CSS</title>
</head>
<body>
<div style="background:#EEEEEE;padding:10px;width:240px;">
  <img src="/jscss/demoimg/wall_s8.jpg" width=70 height=95 id=demo1 style="float:left;">
  <div id=demo0 style="clear:none;">这是一个简单的图片和文字混合排版的一个常用布局，作为网页设计者我们有必要掌握这种技术。</div>
  <div id=demo0 style="clear:both;">这是一个简单的图片和文字混合排版的一个常用布局，作为网页设计者我们有必要掌握这种技术。</div>
</div>
</body>
</html>
</textarea>

网页开发经验总结