CSS：相对位置和向左浮动会导致不良位置。

Question

I'm having a hard time trying to fix the position of a DIV. 我很难确定DIV的位置。 The code and position in the browser seems to be ok. 在浏览器中的代码和位置似乎还可以。

But on Dreamweaver preview the DIV is outside the assigned space: 但是在Dreamweaver预览中，DIV在分配的空间之外：

The problem seems to be the "float:left" on .th_block_info_container (line 21) 问题似乎是.th_block_info_container上的“ float：left”（第21行）

Is this something that affects the website or is just a Dreamweaver problem? 这是否会影响网站或仅仅是Dreamweaver问题？

Any help will be much appreciated. 任何帮助都感激不尽。

Thanks. 谢谢。

 <!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 sometimes does not compile the code very well (at least when I developed, in ages of dreamweaver 8), relax. Dreamweaver有时不能很好地编译代码（至少在Dreamweaver 8时代，当我开发该代码时）请放松。

Test your code in the most used browsers that's all you need. 在所需的最常用的浏览器中测试代码。

Check your own example here, everything is aligned and working like a charm. 在这里检查您自己的示例，所有内容都是一致的，并且像魅力一样起作用。

CSS：相对位置和向左浮动会导致不良位置。

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-09-16 19:16:51

CSS：相对位置和向左浮动会导致不良位置。

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-09-16 19:16:51

解决方案1
0 已采纳 2016-09-16 19:16:51