从HTML表格中删除列倾向

我正在设计一个包含7个图像的表格，它们的大小大致相同。基本上，我想知道是否有一种方法（其他方式将每行分割成不同的表格）来改变HTML倾向，将所有内容都放在列中，并强制它根据行进行布局。从HTML表格中删除列倾向

这是一个jsfiddle它是什么。（我用Lorem Ipsum而不是图像）我想顶部和底部的行居中。

我知道我可以做到这一点，如果我将它分成三个表，并设置每个人有一个width:xxxpx和margin: 0 auto，但宁愿不这样做。

任何建议表示赞赏 - 谢谢！

来源

2012-02-23 bassplayer7

你确定[一张桌子是适合工作的工具]（http://www.hotdesign.com/seybold/）？ – Quentin 2012-02-23 17:49:04

爱那个网站。说真的，我通常真的很清楚桌子，但认为在这种情况下最容易。我会看看非表是如何结合在一起的。 – bassplayer7 2012-02-23 18:57:06

是的，在这个问题上使用多个div可能会更好。是否有可能做一些这样的：

HTML：

<div class="rows"> 
    <div class="top"> 
     <img></img> 
     <img></img> 
    </div> 
    <div class="middle"> 
     <img></img> 
     <img></img> 
     <img></img> 
    </div> 
    <div class="bottom"> 
     <img></img> 
     <img></img> 
    </div> 
<div>

CSS：

.rows{ 
    margin:10px; 
} 

.top, .bottom{ 
    padding-left:85px; 
    padding-right:85px; 
} 

.top, .bottom, .middle 
{ 
    width:520px; 
} 

.rows img 
{ 
    margin: 10px; 
    width:150px; 
}

基本上，让图像的正常流动控制自己的定位，而是使用边距和填充以平衡间距。

来源

2012-02-23 18:30:51 Zensar

谢谢大家的帮助！ @Zensar我采纳了你的建议，但选择使用'width：66％'（和每个偶数行的'100％'）连同'margin：0 auto;'并且选择每个偶数行与一个'：nth-child ）'伪类。这是最终产品的可扩展性http://dev.dropletirrigation.com/irrigation-suppliers.html – bassplayer7 2012-02-23 19:08:24

请参阅vertical-align属性。

来源

2012-02-23 17:48:34 Quentin

为什么你甚至打扰每行创建多个单元？把所有放在同一个单元格中的图像放在一起，放在一起。

来源

2012-02-23 17:51:07 Artyom

这确实很好地工作。我发现我必须在那里放置div来保持它的中心。谢谢！ – bassplayer7 2012-02-23 18:58:11

从HTML表格中删除列倾向

回答

相关问题