2.4两列布局

淡淡的烟草味﹌ 2022-05-07 04:00 215阅读 0赞

网页中经常看到左边为商品图片，右边为实物介绍，可以通过两列布局实现。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			 }
    			#wrap{
    				width: 600px;
    				height: 400px;
    				border: 1px solid;
    				margin: 0 auto;
    			}
    			
    			.left{
    				float: left;
    				width: 400px;
    				height: 400px;
    				background: url(img/企鹅.jpg) no-repeat;
    				background-position: -100px 0;
    			}
    			.right{
    				padding-left: -10px;
    				background: yellow;
    				
    				white-space: nowrap;
    				text-overflow: ellipsis;
    				overflow: hidden;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="left">
    			</div>
    			<div class="right">
    				企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在<br />
    				南极安家落户。全世界的企鹅共有18种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；<br />
    				脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛<br />
    				间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。<br />
    			</div>
    		</div>
    	</body>
    </html>

![在这里插入图片描述][70]

[70]: /images/20220506/c135078d7f744338b0f98aae33b2609f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS两列布局的N种实现

![format_png][] 来源 | http://www.fly63.com/article/detial/9541 一，什么是两列布局两列布局分

向右看齐/ 2022年12月28日 06:21/ 0 赞/ 124 阅读

相关 html5+css 两列布局

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <

我就是我/ 2022年07月20日 15:25/ 0 赞/ 199 阅读

相关 CSS 两列布局---左侧固定，右侧自适应

前端一个小面试题总结如下： 1、方法一，高度100%，左侧float，右侧自动宽度（会自动占满剩余宽度）。 2、方法二，绝对定位absolute，使用方法一的HTML结

妖狐艹你老母/ 2022年07月19日 06:26/ 0 赞/ 234 阅读

相关两种方式实现父布局中两列布局的自适应

自适应宽度是很多网页都具备的特性，因为实现自适应能让用户在改变浏览器窗口大小的同时，仍然可以看到原来版式的布局，并不会因为浏览器窗口的大小而让版面失去了原来设计的布局。

Myth丶恋晨/ 2022年06月16日 04:51/ 0 赞/ 235 阅读

相关 CSS两双列布局

1、使用绝对定位 .aside{ position: absolute; top: 0; left: 0;

谁借莪１个温暖的怀抱￠/ 2022年06月14日 07:47/ 0 赞/ 224 阅读

相关 2.4两列布局

网页中经常看到左边为商品图片，右边为实物介绍，可以通过两列布局实现。 <!DOCTYPE html> <html> <head> <me

谁践踏了优雅/ 2022年05月07日 18:22/ 0 赞/ 223 阅读

相关 2.4两列布局

网页中经常看到左边为商品图片，右边为实物介绍，可以通过两列布局实现。 <!DOCTYPE html> <html> <head> <me

淡淡的烟草味﹌/ 2022年05月07日 04:00/ 0 赞/ 216 阅读

相关 css 移动web li 左右两列布局

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title>

雨点打透心脏的1/2处/ 2022年04月23日 15:42/ 0 赞/ 306 阅读

相关 DIV+CSS布局一行两列问题（Repeater布局）

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 代码 < div > < asp:Repeater ID =

柔情只为你懂/ 2021年12月24日 15:17/ 0 赞/ 294 阅读

相关 CSS 常见两列布局、三列布局

一、两列布局：　方法一：采用position：absollute;并设置margin-left的值。 left{ position:absol

我会带着你远行/ 2021年12月14日 12:27/ 0 赞/ 349 阅读