Question

我正在尝试获取一个图像，以在我的新Tumblr博客主题中拉伸div元素。

目前我的照片div正在调整其父容器的整个宽度。我遇到的问题是我在照片下方还有一个字幕div，如果照片不是其包含div的全宽，我不希望字幕溢出照片的边缘。

这就是我所追求的： alt text http://dl.getdropbox.com/u/973862/problem.jpg Here is a drawing !

这是我的代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <meta name="author" content="Brant Winter">
    <!-- Date: 2009-04-26 -->
</head>

<style type="text/css">

.container {
    width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.photo {
    border: solid 1px #ccc;
    margin-left: auto;
    margin-right: auto;
}


</style>

<body>

<div class="container">
  <div class="photo">
    <img src="http://8.media.tumblr.com/mFYIJY2I7mpit79h73TC9xa7o1_400.jpg">
    <div class="caption">Sausage dog airtime</div>
  </div>
</div>

</body>
</html>

这就是我的浏览器中的样子： alt text http://dl.getdropbox.com/u/973862/Picture%202.png This is what it looks like

容器div应居中，图像应居中，并且标题文本不应超过照片边缘（如果有足够的文字可以这样做）

不确定我是否有任何意义，但任何帮助都会受到赞赏 - 我今天花了好几个小时!!!“

Answer 1

你的意思是像照片中心一样？

.photo {
border:1px solid #CCCCCC;
margin-left:auto;
margin-right:auto;
text-align:center; <--- 
}

Answer 2

我认为最简单的解决方案就是修复容器的宽度。为什么是520px？

如果必须是520px，那么只需将容器放在容器中心并为标题添加自动边距：

<style type="text/css">

.container {
    width: 520px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.photo {
    border: solid 1px #ccc;
    margin-left: auto;
    margin-right: auto;
}

.caption {
    max-width: 333px;
    margin-left: auto;
    margin-right: auto;
}

</style>

max-width属性会阻止字幕溢出照片边缘。

Answer 3

如果您不介意使用jQuery调整大小，可以尝试这样的方法：

    <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".container").css("width", $(".photo img").css("width"));
        });
    </script>

使用类“photo”找到div中图像的宽度（注意“.photo”和“img”之间的空格），并将该宽度应用于具有“容器”类的div。为了安全起见，您可能希望尽可能使用ID，但只要类名是唯一的，这就可以使用。

如何获得图像来拉伸DIV

3 个答案: