如何组织div标签？

Question

So I'm having a bit of a problem with my div tags ( fiddle demo here: http://jsfiddle.net/4ZQLq/ ). 因此，我的div标签存在一些问题（此处的小提琴演示： http : //jsfiddle.net/4ZQLq/ ）。

What I want to accomplish is this: 我要完成的是：

When you click on the left image, the entire div tag (app1) should move to the left and fade out. 当您单击左侧图像时，整个div标签（app1）应该移至左侧并淡出。 Also the div tag behind that (app2), should FADE IN. 另外（app2）后面的div标签也应淡入。

When I had them the same size, it would work as so. 当我使用相同的尺寸时，它可以正常工作。 But when I made them different sizes, this is the problem I have (again, check my fiddle for visual demo: http://jsfiddle.net/4ZQLq/ ). 但是，当我将它们设置为不同的大小时，这就是我遇到的问题（再次，请检查我的提琴以获得视觉演示： http : //jsfiddle.net/4ZQLq/ ）。

I WANT them to be different sizes. 我希望它们的大小不同。 Have the front one fade out, and the one behind to fade in. 让前面的一个淡出，后面的一个淡入。

<!DOCTYPE html>
<html>

<head>

<title>Forget Me Not</title>

<style>

body
{
background-color:#66d9ff;
}

#app1{
position:absolute;
width:250px;
height:250px;
z-index:1;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
background:white;
box-shadow: 0 0 1px 1px #888888;
text-align:center
}

#app2{
position:absolute;
width:300px;
height:300px;
z-index:0;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
background:white;
box-shadow: 0 0 1px 1px #888888;
text-align:center;
}

img.appIMG1{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}

img.appIMG2{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(document).ready(function () {
    $(".appIMG1").click(function () {
        $("#app1").animate({
            left: '250px',
            opacity: 0
        });
    $("#app2").fadeIn("slow");
       });
});
</script>

</head>

<body>
<div id="app1"><p><b><u><font face="TimeBurner" color="#66d9ff" size="6">Do you want to make a reminder?</b></u></font></p>
<br>
<img class="appIMG1" border="0" src="YES.png" align="left" hspace=1.8% >
<img class="appIMG2" border="0" src="NO.png" align="right" hspace=2%>
</div>

<div id="app2">
<form>
Name for the reminder: <input type="text" name="firstname"><br>
On what days would you like to be reminded on: <br>
<input type="checkbox" name="day" value="Monday">Monday<br>
<input type="checkbox" name="day" value="Tuesday">Tuesday<br>
<input type="checkbox" name="day" value="Wednesday">Wednesday<br>
<input type="checkbox" name="day" value="Thursday">Thursday<br>
<input type="checkbox" name="day" value="Friday">Friday<br>
<input type="checkbox" name="day" value="Saturday">Saturday<br>
<input type="checkbox" name="day" value="Sunday">Sunday<br>
</form>
</div>

</body>

</html>

Answer 1

Sounds like you want your app2 div to not display originally and then fade in. Is that correct? 听起来好像您希望您的app2 div最初不显示然后淡入。这是正确的吗？ Set it in the markup as: 在标记中将其设置为：

<div id="app2" style="display:none">

Fiddle 小提琴

Answer 2

If you want the one behind to be hidden until you click the front one, it's as easy as adding display: none; 如果您希望隐藏后面的一个直到单击前面的那个，就像添加display: none;一样简单display: none; to the CSS for #app2 . 到#app2的CSS。

Here's the updated fiddle: http://jsfiddle.net/jakelauer/4ZQLq/2/ 这是更新的小提琴： http : //jsfiddle.net/jakelauer/4ZQLq/2/

Answer 3

As a matter of good CSS practice, I recommend placing common CSS tasks like this into helper classes for easy reuse: 作为良好的CSS惯例，我建议将这样的常见CSS任务放入帮助器类中，以方便重用：

.hidden{
    display: none;
}

It makes for smaller CSS classes in general and increases HTML code readability since you have less clutter and common functions can be given friendly names. 通常，它使CSS类更小，并且增加了HTML代码的可读性，因为您的混乱程度降低了，并且可以为常用功能指定友好名称。 Remember that you can add more than one class to your HTML and with good class names, they can become very descriptive. 请记住，您可以在HTML中添加多个类，并且使用良好的类名称，它们会变得非常具有描述性。

I've redone the previous two answers with some new CSS, which allows for: 我已经使用一些新的CSS重做了前两个答案，该CSS允许：

The removal of the <b><u> tags, which are now handled by CSS. 删除<b> <u>标记，该标记现在由CSS处理。 The removal of the hspace attribute on the <img> tags, which is deprecated and no longer supported in HTML5. 移除<img>标记上的hspace属性，该属性已过时，HTML5中不再支持该属性。 Also, many of the HTML attribute tags that modify presentation are now handled by CSS and are reusable across other pages if you choose. 而且，许多修改外观的HTML属性标记现在都由CSS处理，并且可以根据需要在其他页面上重复使用。

After all this, the HTML before the form is (in my opinion) much easier to read and looks like this: 毕竟，（我认为）表单之前的HTML更加易于阅读，看起来像这样：

<body>
<!-- php stuff goes the body -->
<div id="app1"><p class="reminderFont">Do you want to make a reminder?</p>
<br>
<img class="appIMG1 floatLeft" src="YES.png">
<img class="appIMG2 floatRight" src="NO.png">
</div>

<div id="app2" class="hidden">

Managing your HTML's appearance with CSS will make your life easier in the long run, makes code easier to read, and is becoming the web standard as certain HTML presentation attributes like hspace are removed. 从长远来看，使用CSS管理HTML的外观将使您的生活更轻松，使代码更易于阅读，并且由于删除了某些HTML表示属性（如hspace）而成为Web标准。 I hope this helps! 我希望这有帮助！

http://jsfiddle.net/VPcJs/3/ http://jsfiddle.net/VPcJs/3/

如何组织div标签？

问题描述

3 个解决方案

解决方案1
0 已采纳 2013-05-20 23:52:33

解决方案2
0 2013-05-20 23:53:27

解决方案3
0 2013-05-21 01:05:42

如何组织div标签？

问题描述

3 个解决方案

解决方案1 0 已采纳 2013-05-20 23:52:33

解决方案2 0 2013-05-20 23:53:27

解决方案3 0 2013-05-21 01:05:42

解决方案1
0 已采纳 2013-05-20 23:52:33

解决方案2
0 2013-05-20 23:53:27

解决方案3
0 2013-05-21 01:05:42