这是一个创建于 3769 天前的主题，其中的信息可能已经有所发展或是发生改变。
实现效果：左边图片定宽，右边文字和图片平行排列，宽度随着窗口宽度变化而变化。
请看nec左图右文排列：
http://nec.netease.com/library/111129
实现同样的排版，下面这种方式更简单：
HTML代码：
<div class="">
<div class="u-img"><img src="http://nec.netease.com/img/s/3.jpg" alt="" /></div>
<div class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus fugit molestiae dignissimos unde, doloremque nihil, sequi ad maxime optio, quae minus similique suscipit cum consequatur, quibusdam cumque assumenda totam placeat. Possimus aliquam incidunt deleniti odio vero eligendi optio ipsum, quos natus quis aut provident tempore distinctio autem perspiciatis cum architecto!</div>
</div>
CSS代码：
.u-img {
width: 60px;
height: 60px;
float: left;
}
.txt {
margin-left: 70px;
}
兼容性方面，在ie6、ie8及以上浏览器、火狐浏览器，网易nec css方案和我上面写的简单代码，都可以正确排版。请问为什么可以简单实现的东西，网易nec css使用了复杂的实现方法，其中原因是什么？
请看nec左图右文排列：
http://nec.netease.com/library/111129
实现同样的排版，下面这种方式更简单：
HTML代码：
<div class="">
<div class="u-img"><img src="http://nec.netease.com/img/s/3.jpg" alt="" /></div>
<div class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus fugit molestiae dignissimos unde, doloremque nihil, sequi ad maxime optio, quae minus similique suscipit cum consequatur, quibusdam cumque assumenda totam placeat. Possimus aliquam incidunt deleniti odio vero eligendi optio ipsum, quos natus quis aut provident tempore distinctio autem perspiciatis cum architecto!</div>
</div>
CSS代码：
.u-img {
width: 60px;
height: 60px;
float: left;
}
.txt {
margin-left: 70px;
}
兼容性方面，在ie6、ie8及以上浏览器、火狐浏览器，网易nec css方案和我上面写的简单代码，都可以正确排版。请问为什么可以简单实现的东西，网易nec css使用了复杂的实现方法，其中原因是什么？
 |
1
AthensBird OP 早上好，顶一下
|
 |
2
seki 2014-09-03 09:07:27 +08:00
你看看你的 css 缺少了什么属性，再和人家的代码对比一下，就知道人家多做了什么工作了吧。不说 margin 和 padding 是进行了细致的距离设定，你这个没有 overflow 的我觉得不是很很合适……
|
|
3
AthensBird OP @seki 我仔细看过nec的代码，它实现右侧文字自适应宽度的方法是设置为100%宽度，然后用margin-left想做偏移图片的宽度，再向右浮动。这种实现方式很不直观，估计这么做是为了hack某个或某些，但是我尚未发现。
于是我试了下面我写的直观的写法，没发现严重的兼容问题，可能细节上略有不同，但可继续完善。 我想弄明白nec css方案这么做的原因 |
|
4
seki 2014-09-03 10:18:05 +08:00
@AthensBird 它那个依赖了 reset 和图片容器的代码，估计得连起来一起看……具体的我也没研究出来 = =
|
 |
5
wxt2005 2014-09-03 11:19:09 +08:00
稍微瞄了一眼，我的理解是它要的效果是一个图片“列表”，而不是直接div套div。
|
 |
6
wsph123 2014-09-03 12:31:01 +08:00 via iPhone
（4楼的话读了半天也没明白
左侧定宽确实不需要如此复杂！ |
 |
7
ththlisa 2014-09-03 13:53:50 +08:00
= = 楼主，你就一张图片来测试肯定不用那么复杂。
人家css是跟着html那块走的。从严格上来布局，nec细节到给LI写css实在不容易走图 css多点我觉得挺正常啊= = 如果是精简性和稳定性。。我会选后者。 |
 |
8
zetttt 2014-09-03 14:28:54 +08:00
@AthensBird
按你的代码，当网络状态不佳的情况下第一次加载，如果你没有指定上一级的宽度，就会出现.txt 跑到第二行的情况，再次刷新页面就会正常。和HTML渲染顺序有关。 NEC .txt 中你觉得会多余的css是因为 在IE7下 文字有浮动有溢出的问题。 |
|
9
zetttt 2014-09-03 14:29:35 +08:00
右浮动, sorry
|
|
10
AthensBird OP 我把主题中的问题发邮件问了nec，回复如下
1、这种布局在ie6下，右边的文本会多向右偏移3像素左右 2、如果右边txt容器中有其他元素且做了清除浮动，会有另一个问题（所有浏览器都是） 上面提到的这种布局，指的是我主题中写的简单实现布局。 |
Select Language