堆栈内存溢出
  简体   繁体   English

PHP库中的CSS布局

[英]css layout in php gallery

 原文  2013-03-18 13:01:05  5   2    css/ html/ layout/ gallery

问题描述

I've been working on a gallery made in php. 我一直在用php制作画廊。 Some time ago, I made the layout using tables. 前一段时间，我使用表格进行了布局。 It worked out super. 它表现超级好。 Now, using tables for layouts is not recommended and sort of "deprecated" (I don't understand why, if someone could explain this to me, thank you). 现在，不建议使用表格进行布局，并且不建议使用“过时”（我不明白为什么，如果有人可以向我解释这一点，谢谢）。 So, I'm trying to change the layout from tables to divs and I'm having a lot of problems (can someone recommend a good reference to how to make a good layout using css?). 因此，我正在尝试将布局从表更改为div，并且遇到了很多问题（有人可以推荐一个很好的参考，说明如何使用css制作好的布局吗？）。 So far I managed this: http://jsfiddle.net/hochvater/4DbUU/ . 到目前为止，我已经做到了： http : //jsfiddle.net/hochvater/4DbUU/ 。 MY FIRST QUESTION is this: how do I make the #panel_poze div to show up in the top of the container div, glued to the #panel_albume (as it is now)? 我的第一个问题是：如何使#panel_poze div出现在容器div的顶部，并粘在#panel_albume上（如现在）？ I don't understand why #panel_albume is lined with the 3rd div contained by the div it is glued to (#panel_albume). 我不明白为什么#panel_albume与它粘贴到（#panel_albume）的div包含的第三个div对齐。 My second question would be this: can't I just put the big table (you can imagine easily how it looks by the structure of the divs) into a container div and sort of leave it as it was...would this still be considered "deprecated" or not recommended? 我的第二个问题是：我不能只是将大表（您可以轻松想象它的div结构如何）放入容器div中，然后将其保留原样...这是否仍然是认为“已弃用”还是不推荐？

THE CSS CODE: 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 {
}

THE GALLERY CODE: 画廊代码： 

<?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>

Thank you for your time invested in reading this and any ideas would be appreciated. 感谢您花费时间阅读本文，我们将不胜感激。

2 个解决方案

解决方案1
 0 已采纳  2013-03-18 13:09:39

I'd recomend you to take a look at a CSS grid system, such as Twitter Bootstrap or 960.gs 我建议您看一下CSS网格系统，例如Twitter Bootstrap或960.gs

To answer your question about tables: the use of tables were ok before CSS. 要回答有关表的问题：在CSS之前可以使用表。 CSS will help you organize your content in much better and flexible ways. CSS将帮助您以更好，更灵活的方式组织内容。 I suggest you take a look at CSS Tricks and the W3 CSS tutorials to make sure you understand how <div> works and how you can float them around. 我建议您看一下CSS技巧和W3 CSS教程 ，以确保您了解<div>工作原理以及如何浮动它们。 Also, HTML5 take the semantic meaning of the containers and will allow you to better represent the structure of your site. 另外，HTML5具有容器的语义含义，将使您能够更好地表示站点的结构。 Take a look at HTML5 Boilerplate if you want to learn more or even get a initial template to work with. 如果您想了解更多甚至什至可以使用初始模板，请看一下HTML5 Boilerplate 。

解决方案2
 0  2013-03-18 14:05:05

Roping off of Andre's answer above. 结束以上安德烈的回答。 A good way to practice is to simply make a website which has very basic CSS properties, but multiple different formats of the divs, so that you can understand how the boxes interact. 练习的一种好方法是简单地创建一个具有非常基本的CSS属性但具有多种不同div格式的网站，以便您可以了解这些框是如何交互的。

One such project that I did way back when was to simple make a site with a header, a horizontal navigation, then several content blocks that were full-width, 50% - 50% dual columns, 25% - 50% - 25% triple column, 33% - 33% - 33% triple, and 25%-25%-25%-25% quad columns, then a footer. 我回溯的一个这样的项目是简单地创建一个带有标题，水平导航的站点，然后是几个全角内容块，50％-50％双列，25％-50％-25％三重列，33％-33％-33％三重列和25％-25％-25％-25％四列，然后是页脚。

Something you should definitely be looking into is responsive layout so you can make your gallery mobile friendly. 您绝对应该考虑的是响应式布局，以便使图库移动友好。

Edit: 编辑：

Is this what you were meaning as far what you want it to look like? 到目前为止，这是您的意思吗？

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

I changed these rules: 我更改了以下规则： 

#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;
}

I deleted your display: inline-block; 我删除了您的display: inline-block; and added float: left; 并添加了float: left; to both children. 给两个孩子 Then I told the container to set overflow:hidden; 然后我告诉容器设置overflow:hidden; and to clear:both; 并clear:both; (left and right floats) （左右浮动）

Edit 2: 编辑2：

For clarity requested by the OP... 为明确起见，OP要求...

In lamens terms, when using float:left or float:right on an element, in a way picks that element up off the page and allows it to "float" which ever direction you tell it to. 用拉曼术语来说，在元素上使用float:left或float:right时，会以某种方式将元素从页面上移开，并使其“浮动”到您告诉它的方向。 It performs this float with complete disregard to elements that are nearby which are not floated. 它完全忽略附近未浮动的元素来执行此浮动。 Elements that are nearby then start to wrap around the floated element. 然后，附近的元素开始环绕浮动元素。 This is sometimes desirable, for example floating an image left or right and allowing the text to wrap around the image. 有时这是理想的，例如，向左或向右浮动图像并允许文本环绕图像。 In some cases however you don't want other elements to wrap around the ones you have floated. 但是，在某些情况下，您不希望其他元素环绕已浮动的元素。 In those cases you use the clear command to tell the next closest element to not wrap around floated elements. 在这种情况下，您可以使用clear命令告诉下一个最接近的元素不要环绕浮动的元素。 See these two examples: 请参阅以下两个示例：

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

In the above example, no clear is present. 在上面的示例中，不存在清除。 Notice the text in the yellow .footer div is coming up between the two floated elements. 请注意，黄色的.footer div中的文本出现在两个浮动元素之间。

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

In this example I have added clear: left; 在此示例中，我添加了clear: left; to .footer (the yellow div). 到.footer （黄色div）。 Notice it is no longer wrapping up into the tiny space between divs, but it is still wrapping aroudn the element to the right. 注意，它不再包裹在div之间的微小空间中，而是仍然包裹在右边的元素周围。

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

Here I have switched it to clear: right; 在这里，我将其clear: right; notice it is no longer wrapping up to the left div or in the space between divs anymore. 请注意，它不再环绕左div或div之间的空间。 It is nested neatly beneath the right div. 它整齐地嵌套在右div下方。 This is because the right div is the longest div. 这是因为正确的div是最长的div。 If I was to increase the height of the left div to be longer than the right div... 如果我要将左div的高度增加到比右div长...

...Like here: http://jsfiddle.net/GL4Pn/5/ ...就像这里： http : //jsfiddle.net/GL4Pn/5/

Notice now the div wraps up to the right, but not between the divs. 请注意，现在div环绕在右侧，但不在div之间。 Now.. If I change the code to clear: both; 现在，如果我更改代码以clear: both; ... ...

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

Notice it is back to how it was with clear:right when the right div was longest. 请注意，当正确的div最长时，它又回到了clear:right状态。 And if I change the left div to be shorter than the right and keep clear:both in place... 如果我将左div更改为短于右div并保持clear:both就位...

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

The same result as before... 和以前一样的结果...

It is important to note that elements will only wrap floats if they are the very next element in the code. 重要的是要注意，如果元素是代码中的下一个元素，则元素只会包装浮点数。 If I go back to the first example with no clear, but add an extra div beneath footer, you'll see that it does not misbehave as the .footer div has already take the available space. 如果我回到第一个示例（没有明确说明），但是在页脚下方添加了一个额外的div，您会发现它没有异常，因为.footer div已经占用了可用空间。

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 集成CSS的PHP画廊 - PHP gallery integrating CSS CSS布局：带左栏的图片库 - css layout: image gallery with left-bar 画廊风格的布局与CSS的Flex框？ - gallery style layout with css flex-box? 图片库-Pinterest是否喜欢使用CSS进行布局？ - Image gallery - Pinterest like layout with CSS? 如何使用CSS和Javascript创建居中的画廊布局？ - How to make a centered gallery layout with CSS and Javascript? CSS onmouseover画廊与PHP循环 - CSS onmouseover gallery with php loop CSS和PHP布局问题 - Css and php layout issues PHP破坏CSS布局 - PHP breaking CSS layout 使用PHP CSS和JavaScript的图片库 - Image Gallery Using php css and javascript 使用CSS flexbox或网格布局的响应式图库 - Responsive image gallery using CSS flexbox or grid-layout
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM