Question

我正在尝试制作一个网格，高度为2张图片，部分div内有3张图片。 This将是最佳解决方案。图片下方将是一个描述性文本，仅限于单个图像的宽度。所有这些图像和文本都会互为填充。这是JSfiddle。 https://jsfiddle.net/278sem83/

CSS

body{
    margin:0; 
    padding:0;
}

#header {
    background-color:#ff6600;
    color:white;
    text-align:left;
    padding:2px;
}

#nav {
    line-height:30px;
    background-color:#fff000;
    height:350px;
    width:125px;
    float:left;
    padding:5px;
}

#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:#737373;
    color:white;
    clear:both;
    text-align:center;
}

#container {
    margin:auto;
    width:900px;
    text-align:left;
    overflow: hidden;
}
.inner_block {
    display: inline-block;
    text-align: center;
    width: 350px;
    height:200px;
}

img {
    width: 350px;
}

.main_block{
    text-align:center;
    width:750px;

}

HTML

<div id="container"><!---container--->
    <div id="header">
        <h1>JORDAS</h1>
    </div><!--header-->

    <div id="nav">
        <a href="index.html">Etusivu</a> <br>
        <a href="teltat.html">Teltat</a><br>
        <a href="page2.html">Palvelut</a><br>
        <a href="Yhteystiedot.html">Yhteistiedot</a><br>
    </div>
    <div id="section">
        <div class="main_block">
            <p> Tervetuloa Jordas Ab:n kotisivuille. Olemme...
        </div><!--mainblock-->
    </div>
    <div id="footer">
        <h3>POP-UP TELTTOJEN YKKÖNEN </h3>
    </div><!--footer-->
</div> <!--container-->

Answer 1

这里有一些代码可以帮助您开始获得所需的布局：

<div class="main_block">

    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div> 

</div><!--mainblock-->

CSS：

.box {
    float: left;
    width: 29%;
    height: 75px;
    margin: 10px;
    border: 3px solid blue;  
}

工作小提琴：https://jsfiddle.net/nfeLtafz/

如何在HTML和CSS中使用填充制作图像网格

1 个答案: