Html 三列之间的间距div_Html_Css_Css Float

Html 三列之间的间距div

html css

Html 三列之间的间距div,html,css,css-float,Html,Css,Css Float,这里是我想要的一个例子这些图像是从MySQL中的while循环加载的，并且希望它们之间的间距能够使左栏和右栏彼此接触，中间居中。喜欢图片：D 我拥有的CSS： #realisation .box{ float:left; width:286px; background:#fff; padding:10px; margin-right:20px; -moz-box-shadow: 1px 2px 2px #ccc; -webkit-box

这里是我想要的一个例子

这些图像是从MySQL中的while循环加载的，并且希望它们之间的间距能够使左栏和右栏彼此接触，中间居中。喜欢图片：D

我拥有的CSS：

#realisation .box{
    float:left;
    width:286px;
    background:#fff;
    padding:10px;
    margin-right:20px;
    -moz-box-shadow: 1px 2px 2px #ccc;
    -webkit-box-shadow: 1px 2px 2px #ccc;
    box-shadow: 1px 2px 2px #ccc;
}

#realisation .box:last-child{
    margin-right:0px;
}

循环

<div class="box">
    <div><img src="imgs/beta/imgpasrap.jpg" width="286" height="176"/></div>
    <p>Text here</p>
  </div>


此处文本

对于前3个盒子来说，它工作得很好，但除此之外，显示器也很糟糕。我怎样才能像上面的图片那样做到这一点呢？

试试这个

任何主要浏览器都不支持：last-child（）选择器。

在包含所有这些图像的框上设置宽度。（参考资料：）
（注意：图像的样式仅用于保持其大小-无需添加）

#外部{
宽度：1000px；
}

使用以下代码：

<html>
<head>
<style>
body{
background-color:#CCCCCC;
}
.product_image{
    float:left;
    background:#fff;
    padding:10px;
    margin-right:20px;
    margin-bottom:20px;
    -moz-box-shadow: 1px 2px 2px #ccc;
    -webkit-box-shadow: 1px 2px 2px #ccc;
    box-shadow: 1px 2px 2px #ccc;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<?php for($i=1; $i<=9; $i++){ ?>
<div class="product_image"><img src="image.jpg" /></div>
<?php 
if($i%3==0){
echo '<div class=clear></div>';
}
} ?>
</body>
</html>


身体{
背景色：#中交；
}
·产品形象{
浮动：左；
背景：#fff；
填充：10px；
右边距：20px；
边缘底部：20px；
-莫兹盒阴影：1px2px2px#ccc；
-网络工具包盒阴影：1px 2px 2px#ccc；
盒影：1px2px2px#ccc；
}
.清楚{
明确：两者皆有；
}

用while循环进行Relace For Loop，而不是显示所需的内容。仅使用缩略图图像


<div class="className">
    <!-- image -->
</div>

.className{
    width: 80%;
    height: 80%;
 }

.类名{
宽度：80%；
身高：80%；
}

No请记住，我也有多行，而不是一行中只有3列。我将制作的第四个div将打破浮动。在主要浏览器中：last-child选择器绝对受支持。只是旧浏览器的支持变得不完善。是的，成功了，谢谢！不知道这么简单的表情可能很难想象。。。