1

我一直在做一个用 php 制作的画廊。前段时间,我使用表格进行布局。结果超级好。现在,不建议使用表格进行布局,并且有点“弃用”(我不明白为什么,如果有人可以向我解释一下,谢谢)。因此,我正在尝试将布局从表格更改为 div,但遇到了很多问题(有人可以推荐一个很好的参考资料,了解如何使用 css 制作良好的布局吗?)。到目前为止,我管理了这个:http: //jsfiddle.net/hochvater/4DbUU/. 我的第一个问题是:如何使#panel_poze div 显示在容器 div 的顶部,并粘在 #panel_albume 上(就像现在一样)?我不明白为什么#panel_albume 与它所粘到的 div (#panel_albume) 所包含的第三个 div 对齐。我的第二个问题是:我不能把大表(你可以通过 div 的结构轻松想象它的外观)放入容器 div 并保持原样......这仍然是吗?被认为“已弃用”或不推荐?

CSS代码:

    body {
    background-color: black;
    color: white;
}
@font-face {
    font-family:"john_handy";
    src: url("john_handy.eot");
    src: local("¢"), url("john_handy.woff") format("woff"), url("john_handy.TTF") format("opentype"), url("john_handy.svg#john_handy") format("svg");
}
@font-face {
    font-family:"bradley_hand";
    src: url("bradley_hand.eot");
    src: local("¢"), url("bradley_hand.woff") format("woff"), url("bradley_hand.TTF") format("opentype"), url("bradley_hand.svg#bradley_hand") format("svg");
}
a:link {
    color:white;
}
/* unvisited link */
 a:visited {
    color:white;
}
/* visited link */
 a:hover {
    color:red;
}
/* mouse over link */
 a:active {
    color:blue;
}
/* selected link */
 .fonty {
    text-align:center;
    font: italic 30px john_handy, serif;
}
a.fonty {
    font-style: normal;
    font-size:20px;
}
#pp {
    margin: 15% auto;
    max-width:80%;
    min-width:850px;
    text-align: center;
    white-space:nowrap;
}
.sec {
    position: static;
    margin: 0% 4%;
    max-width: 20%;
    min-width: 200px;
    display: inline-block;
}
.imageOff {
    border: 3px solid transparent;
    margin: auto;
}
.imageOn {
    border: 3px solid red;
    opacity: 0.7;
    filter: alpha(opacity=70);
    margin: auto;
}
.selected {
    padding: 2px;
    border: 1px solid red;
}
.submit {
    /*margin: 0;*/
    border: none;
    /*padding: 0;*/
    background: black;
    font:normal 20px john_handy, serif;
    color:white;
}
.subsel {
    color:red;
}
.submit:hover {
    color:red;
}
.poze_albume {
    border: 1px solid red;
    height: 250px;
    width: 200px;
}
#panel_poze {
    border: 1px solid blue;
    width: 70%;
    min-width: 400px;
    display: inline-block;
    height: 100px;
}
#panel_albume {
    border: 1px solid yellow;
    display:inline-block;
}
#container {
    text-align: center;
    width: 100%;
    border: 1px solid white;
    min-width: 700px;
}
.album {
}

画廊代码:

<?php session_start(); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<link rel="stylesheet" type="text/css" href="./zastyle.css" />
</head>

<body><!-- oncontextmenu="return false;"> -->

<h1 class="fonty">Portofolio</h1>

<?php 
if (!isset($_POST['restart']))
{
?>

<div id="pp">
    <div class="sec ">
    <form action="./galerie.php" method="post" enctype="multipart/form-data">
        <input class="imageOff" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff'" type="image" src="./studio/photoshoot.JPG" title="Studio Photography" alt="Studio Photography" />
        <input type="hidden" name="album" value="studio" />
        <input type="hidden" name="restart" value="1"/>
        <br />
        <input type="submit" class="submit" value="Studio Photography" />
    </form>
    </div>
    <div class="sec ">
    <form action="./galerie.php" method="post" enctype="multipart/form-data">
        <input class="imageOff" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff'" type="image" src="./outdoor_lifestyle/lifestyle.jpg" title="Outdoor and Lifestyle Photography" alt="Outdoor and Lifestyle Photography" />
        <input type="hidden" name="album" value="outdoor" />
        <input type="hidden" name="restart" value="1"/>
        <br />
        <input type="submit" class="submit" value="Outdoor and Lifestyle" />
    </form>
    </div>
    <div class="sec " >
    <form action="./galerie.php" method="post" enctype="multipart/form-data">
        <input class="imageOff" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff'" type="image" src="./landscapes/landscapes.jpg" title="Landscapes" alt="Landscapes" class="album" />
        <input type="hidden" name="album" value="landscapes" />
        <input type="hidden" name="restart" value="1" />
        <br />
        <input type="submit" class="submit" value="Landscapes" />
    </form>
    </div>
    </form>
</div>

<?php //require("za_menu.php"); ?>

<?php
}
if (isset($_POST['restart'])&&$_POST['restart']==1){
?>

<div id="container">
    <div id="panel_albume">
        <div class="poze_albume">
        <form action="./galerie.php" method="post" enctype="multipart/form-data">
            <input class="imageOff <?php
            if($_POST['album']=='studio') echo 'selected';
            ?>" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff <?php
            if($_POST['album']=='studio') echo 'selected';
            ?>'" type="image" src="./studio/photoshoot.JPG" title="Studio Photography" alt="Studio Photography" />
            <input type="hidden" name="album" value="studio" />
            <input type="hidden" name="restart" value="1" />
            <br />
            <input type="submit" class="submit <?php
            if($_POST['album']=='studio') echo 'subsel';
            ?>" value="Studio Photography" />
        </form>
        </div>
        <div  class="poze_albume">
        <form action="./galerie.php" method="post" enctype="multipart/form-data">
            <input class="imageOff <?php
            if($_POST['album']=='outdoor') echo 'selected';
            ?>" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff <?php
            if($_POST['album']=='outdoor') echo 'selected';
            ?>'" type="image" src="./outdoor_lifestyle/lifestyle.jpg" title="Outdoor and Lifestyle Photography" alt="Outdoor and Lifestyle Photography" />
            <input type="hidden" name="album" value="outdoor" />
            <input type="hidden" name="restart" value="1" />
            <br />
            <input type="submit" class="submit <?php
            if($_POST['album']=='outdoor') echo 'subsel';
            ?>" value="Outdoor and Lifestyle" />
        </form>
        </div>
        <div  class="poze_albume">
        <form action="./galerie.php" method="post" enctype="multipart/form-data">
            <input class="imageOff <?php
            if($_POST['album']=='landscapes') echo 'selected';
            ?>" onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff <?php
            if($_POST['album']=='landscapes') echo 'selected';
            ?>'" type="image" src="./landscapes/landscapes.jpg" title="Landscapes" alt="Landscapes" class="album"/>
            <input type="hidden" name="album" value="landscapes" />
            <input type="hidden" name="restart" value="1" />
            <br />
            <input type="submit" class="submit <?php
            if($_POST['album']=='landscapes') echo 'subsel';
            ?>" value="Landscapes" />
        </form>
        </div>
    </div>
    <div id="panel_poze"></div>
</div>

<?php }
session_destroy();
?>

</body>
</html>

感谢您花时间阅读本文,我们将不胜感激。

4

2 回答 2

0

从上面安德烈的回答中解脱出来。一个好的实践方法是简单地制作一个网站,它具有非常基本的 CSS 属性,但有多种不同格式的 div,这样您就可以了解盒子如何交互。

我以前做过的一个这样的项目是简单地制作一个带有标题、水平导航的网站,然后是几个全宽的内容块,50% - 50% 双列,25% - 50% - 25% 三重列,33% - 33% - 33% 三列和 25%-25%-25%-25% 四列,然后是页脚。

您绝对应该研究的是响应式布局,因此您可以使您的画廊移动友好。

编辑:

这就是你想要的样子吗?

http://jsfiddle.net/4DbUU/1/

我改变了这些规则:

#panel_poze {
border: 1px solid blue;
width: 70%;
min-width: 400px;
height: 100px;
float: left;
}

#panel_albume {
border: 1px solid yellow;
    float: left;
}

#container {
text-align: center;
width: 100%;
border: 1px solid white;
min-width: 700px;
clear: both;
overflow: hidden;
}

我删除了你的display: inline-block;并添加float: left;到两个孩子。然后我告诉容器设置overflow:hidden;和到clear:both;(左右浮动)

编辑2:

为了清楚起见,OP 要求...

用跛脚的话来说,当使用float:leftfloat:right在一个元素上时,以某种方式从页面上拾取该元素并允许它“浮动”你告诉它的任何方向。它完全不考虑附近未浮动的元素来执行此浮动。然后附近的元素开始环绕浮动元素。这有时是可取的,例如向左或向右浮动图像并允许文本环绕图像。但是在某些情况下,您不希望其他元素环绕您浮动的元素。在这些情况下,您可以使用clear命令告诉下一个最接近的元素不要环绕浮动元素。看这两个例子:

http://jsfiddle.net/GL4Pn/2/

在上面的例子中,没有明确的存在。请注意黄色.footerdiv 中的文本出现在两个浮动元素之间。

http://jsfiddle.net/GL4Pn/3/

在此示例中,我已添加clear: left;.footer(黄色 div)。请注意,它不再包裹在 div 之间的微小空间中,但它仍然包裹在右侧的元素周围。

http://jsfiddle.net/GL4Pn/4/

在这里,我已将其切换到clear: right;注意到它不再包裹到左侧 div 或 div 之间的空间中。它整齐地嵌套在右 div 下方。这是因为右边的 div 是最长的 div。如果我要将左侧 div 的高度增加到比右侧 div 长...

...像这里:http: //jsfiddle.net/GL4Pn/5/

请注意,现在 div 向右包裹,但不在 div 之间。现在..如果我将代码更改为clear: both;...

http://jsfiddle.net/GL4Pn/6/

请注意,它回到clear:right了正确 div 最长时的状态。如果我将左侧 div 更改为比右侧更短并保持clear:both原位......

http://jsfiddle.net/GL4Pn/7/

结果和之前一样。。。

重要的是要注意,元素只会在它们是代码中的下一个元素时包装浮点数。如果我没有明确的回到第一个示例,但在页脚下添加一个额外的 div,您会发现它并没有出现异常,因为 .footer div 已经占用了可用空间。

http://jsfiddle.net/GL4Pn/8/

于 2013-03-18T14:05:05.923 回答
0

我建议你看看 CSS 网格系统,例如Twitter Bootstrap960.gs

回答您关于表格的问题:在 CSS 之前可以使用表格。CSS 将帮助您以更好、更灵活的方式组织您的内容。我建议您查看CSS TricksW3 CSS 教程,以确保您了解其<div>工作原理以及如何将它们浮动。此外,HTML5 采用容器的语义含义,并允许您更好地表示您的站点的结构。如果您想了解更多信息,甚至想要使用初始模板,请查看HTML5 Boilerplate 。

于 2013-03-18T13:09:39.530 回答