三列布局,为何不用div ,而用ul li

Question

三列,左中右三部分,左右两部分宽度一样,中间部分稍小
如果是我的话,我会

<div>
    <div class="left_part"></div>
    <div class="center_part"></div>
    <div class="right_part"></div>
</div>

但是我看到不止一个网站(手机端的同程和携程),是如下方式做的

<ul>
   <li>
      <div class="left_part"></div>
      <div class="center_part"></div>
      <div class="right_part"></div>  
   </li>
</ul>

如果是ul 里放了三个li,我还可以理解,但是上面这个只有li,里面放三个div,它比我说的其他两种有什么好处吗?

---

另外, 还有一点疑问,为什么很多div外面都喜欢套一个如*_wrapper的命名的div呢

---

恳请解惑.谢谢各位

不好意思,之前没有贴代码.下面是同程手机端的我说的那种布局
地址是:http://wx.17u.cn/train/traindetail.html?fromCity=%E5%8C%97%E4%BA%AC%E5%8D%97&toCity=%E4%B8%8A%E6%B5%B7%E8%99%B9%E6%A1%A5&tQueryKey=f417a490-0615-40d5-b750-0031f86798dd&trainNo=G101
可能要修改下User-Agent

Answer 1

第一，为什么使用一个li:
我不知道他们出于什么考虑，但是从语义化来讲，一般ul和li用来表示列表，像导航条，列举等一般会用，虽然可以用css来设置，让他们看起来基本一样，但我觉得也不合适。我猜测有可能是本身写码的程序员素质不高，有可能出于其他的考虑。
第二，为什么有wrapper:
个人认为一般会在一个大块外面加一个，设置position为relative,创建一个BFC,防止对外面的影响。把影响限制到一定区域。
个人理解是这样，不对的请指正

Answer 2

个人感觉是语义性 因为现在css3以后标签已经没什么样式意义了 改css可以改出所有效果来
但是如果在手机端 对css3支持不太好的浏览器 或者做了移动端显示优化 可能这3列布局就出不来 或者看着非常小
但是如果定义成列表 至少他会把这3列放到一个竖排去 显示还是正常的

Answer 3

三列的话，我喜欢这么写：

<div class="row">
<div class="col-xs-3">
</div>
<div class="col-xs-6">
</div>
<div class="col-xs-3">
</div>
</div>

Answer 4

不是大公司的项目代码就一定有参考价值，关键看代码是不是大神写的，也有工作不到一年的也会往主干提交代码啊

Answer 5

既然你提了手机端，我觉得可能是考虑到了web和移动端的适配

比如如果ul宽度是在手机端的宽度中，下边内容可能就不是三列，而是三行了。

Answer 6

移动端表单布局，<li></li>一般表示其包含的内容展现在一行，里面就是正常的左中右结构，和咱们平时理解的一样。表单布局
div外面嵌套wrapper，很多时候都是布局的需要，比如定位、设置背景等。当你不明白为什么嵌套wrapper的时候，你去看它的CSS代码，这样就搞明白了。

Answer 7

明显应该用高大上的 flex 布局（android 4.4才支持）