这就是问题.我有一个div,其中包含几段文字,然后是一个浮动的图像.图像按原样浮动,但包含的div不会垂直扩展以适应图像.我知道我可以手动设置div的高度,但这会产生问题,因为我想对我的网站的每个页面使用相同的div,因此高度需要不同.
这是一个代码示例:
#main_contentbox {
width: 918px;
margin: 10px auto;
padding: 10px 20px 20px 20px;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #000;
}
#main_contentbox img#sample {
float: right;
}<div id="main_contentbox">
<h1 class="page"> The Event </h1>
<img id="sample" src="sample.jpg" />
<p>
stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!</p>
<p>stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!
</div>我已经将a中的图像边框设置div为none.我现在想要将该图像置于其包含的div中.我尝试过使用margin: 0 auto;但是没有用.
我确信我忽略了一些愚蠢的东西,但我想寻求stackoverflow社区的帮助,所以这不需要我花一小时盯着屏幕搞清楚.非常感谢.
<body>
<div id="wrapper">
<div id="banner">
<img src="logo3.png"/>
<!--<img src="kslf_logo.png"/>
<img src="logo2.png" title="Katie Samson Lacrosse Festival Logo"/>-->
<div id="social_network">
<a href="#" target="_blank" title="Check out the Facebook Page!">Facebook</a>
</div>
</div>
</div>
</body>
这是CSS ......
#banner {
height: 100px;
width: 960px;
padding-bottom: 10px;
}
#banner img {
border: none;
margin: 0 auto;
}
好的,我已经在我正在处理的这个个人网站上收到了一些有用的信息.在我乱七八糟的嵌套div中,我为自己创造了一些问题.我把那个图像和它旁边的文本都放在另一个div里面并且以div为中心,这很好.但是为了在它下面开始一个新段落,我必须将该段落放在div中,因为需要清除它上面的浮点数(或者它在div旁边的右边距中显示文本).我确信有一种更简单的方法可以做我想做的事情.如果有人能够看看我的代码,看看我的结构错误,那将是一个很大的帮助......非常感谢.
正如你所看到的那样,标题"最近的工作"正在按照它应该的方式集中,但它没有从它上面的那个方框中获得通常的边距.
链接在这里:
我想在这个网页上实现prettyPhoto jQuery插件.
http://mcmach.com/mcmachine/photogallery.html
我想使用单个图像选项并rel="prettyPhoto"为图像链接设置.我是jQuery的新手,也是JavaScript的新手.任何意见,将不胜感激.
好.我最近对这个网站做了一些更新.
http://annberingerart.com/index.php
在进行一些小的更改后,似乎索引页面上的图像的边距和填充已更改.我希望在所有图像之间在垂直和水平方向上具有相等的填充以及一致的边距.
另外,我在安装了Safari 5的朋友的MAC上查看了该网站,并且整个包装器的大小似乎缩小了,因为它不能像我之前那样包含它的子项.
你可以看一下firebug中的CSS,因为在这里发布400多行CSS会很漫长.
任何和所有的批评都是受欢迎的,但我主要想知道如何解决这个问题.
css ×5
html ×4
css-float ×1
image ×1
javascript ×1
jquery ×1
margin ×1
padding ×1
prettyphoto ×1