我很难确定 DIV 的位置。 浏览器中的代码和位置似乎没问题。
但在 Dreamweaver 预览中，DIV 位于指定空间之外:
问题似乎是 .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>最佳答案
Dreamweaver 有时编译代码不是很好(至少我开发的时候是这样，在dreamweaver 8 时代)，放松。
在最常用的浏览器中测试您的代码，这就是您所需要的。
在此处检查您自己的示例，所有内容都已对齐并且运行良好。
关于html - CSS:相对位置和向左浮动导致位置不佳。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39538571/