CSS: 相对位置和向左浮动导致错误位置。

Question

我很难确定 DIV 的位置。浏览器中的代码和位置似乎没问题。

但是在 Dreamweaver 预览中，DIV 在分配的 space 之外：

问题似乎是 .th_block_info_container 上的 "float:left"（第 21 行）

这是影响网站的问题还是仅仅是 Dreamweaver 的问题？

任何帮助将不胜感激。

谢谢。

<!doctype html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Abel|Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
<meta charset="UTF-8">
<style type="text/css">
body,td,th {
 font-family: 'Roboto Condensed', sans-serif;
 font-style: normal;
 font-weight: normal;
 font-size: 12px;
 background-color:#f5f8fa;
 color:#292f33;
}
.profile_sidebar{width:306px; height:800px;float:left;margin:0 18px 0 18px;line-height:800px; text-align:center;background-color:#ffffff;}
.block_section_header{width:954px;float:left; height:18px;line-height:18px;}
.block_section_title {width:468px;float:left; height:18px;line-height:18px;font-size:18px;color:#666666; letter-spacing:1px;}
.block_section_viewall {width:468px;float:right;height:18px;text-align:right;font-size:12px; font-weight:400; letter-spacing:1px; line-height:18px;}
.th_block_container {width:304px;height:268px;border:solid 1px #e1e8ed;float:left;margin:18px 18px 0 0;}
.th_block_thumbnail {width:304px;height:215px; background-color:#b4b9bd; border-bottom:solid 1px #e1e8ed;}
.th_block_info_container {width:241px;height:44px; font-size:12px; text-transform:uppercase;padding:9px 0 0 9px; float:left;}
.th_block_title { width:225px;font-size:14px; height:14px;font-weight:400; margin-bottom:4px; color:#80817c;overflow:hidden;line-height:14px;position:relative;}
.th_block_title span {position:absolute;white-space: nowrap;transform:translateX(0);transition: 1s;}
.th_block_title:hover span {transform: translateX(calc(225px - 100%));}
.th_block_talent {width:225px;font-size:12px;height:14px; color:#3fb0ac;font-weight:400;overflow:hidden;line-height:14px;position: relative;}
.th_block_talent span {position:absolute;white-space: nowrap;transform:translateX(0);transition: 1s;}
.th_block_talent:hover span {transform: translateX(calc(225px - 100%));}
.th_block_quality {width:53px; height:53px;border-left:solid 1px #dddddd;text-align:center;line-height:53px;font-weight:bold;font-size:18px;color:#666666; float:left;}

.ad_horizontal_talent {color:#FF3366;width:954px;height:108px;margin:18px 0; background-color:#f5f8fa; line-height:108px; text-align:center;border:solid 1px #e1e8ed;font-weight:bold;font-size:18px;color:#666666;}

</style>
<title>United Pornstars Profile Template</title>
</head>

<body>
<div style="width:1332px; height:800px;margin:0 auto;">
<div class="profile_sidebar"></div>
<div style="width:972px; height:100%; float:left; background-color:#ffffff; padding:18px 0 18px 18px;">

<!-- Scene Block -->
<div class="block_section_header">
<div class="block_section_title">SECTION TITLE</div>
<div class="block_section_viewall">VIEW ALL</div>
</div>

<div class="th_block_container">
 <div class="th_block_thumbnail"></div>
    <div class="th_block_info_container">
     <div class="th_block_title"><span>The quick brown fox jumps over the lazy dog</span></div>
        <div class="th_block_talent"><span>NAME, NAME 2, NAME 3</span></div>
    </div>
    <div class="th_block_quality">4K</div>
</div>

<div class="th_block_container">
 <div class="th_block_thumbnail"></div>
    <div class="th_block_info_container">
     <div class="th_block_title"><span>The quick brown fox jumps over the lazy dog</span></div>
        <div class="th_block_talent"><span>NAME</span></div>
    </div>
    <div class="th_block_quality">4K</div>
</div>

<div class="th_block_container">
 <div class="th_block_thumbnail"></div>
    <div class="th_block_info_container">
     <div class="th_block_title"><span>The quick brown fox jumps over the lazy dog</span></div>
        <div class="th_block_talent">NAME</div>
    </div>
    <div class="th_block_quality">4K</div>
</div>
<div style="clear:both"></div>
<div class="th_block_container">
 <div class="th_block_thumbnail"></div>
    <div class="th_block_info_container">
     <div class="th_block_title">Lorem Ipsum</div>
        <div class="th_block_talent">NAME</div>
    </div>
    <div class="th_block_quality">4K</div>
</div>

<div class="th_block_container">
 <div class="th_block_thumbnail"></div>
    <div class="th_block_info_container">
     <div class="th_block_title">Lorem Ipsum</div>
        <div class="th_block_talent">NAME</div>
    </div>
    <div class="th_block_quality">4K</div>
</div>

<div class="th_block_container">
 <div class="th_block_thumbnail"></div>
    <div class="th_block_info_container">
     <div class="th_block_title">Lorem Ipsum</div>
        <div class="th_block_talent">NAME</div>
    </div>
    <div class="th_block_quality">4K</div>
</div>

<!-- END Scene Block -->


</div>
</div>
</body>
</html>

Answer 1

Dreamweaver有时编译代码不是很好（至少我开发的时候是这样，在dreamweaver 8时代），放松一下。

在最常用的浏览器中测试您的代码，这就是您所需要的。

在此处检查您自己的示例，所有内容都已对齐并且运行良好。

CSS: 相对位置和向左浮动导致错误位置。

CSS: Position relative and float left causing bad position.

html

css

dreamweaver