CSS：相对位置和向左浮动会导致不良位置。
[英]CSS: Position relative and float left causing bad position.
问题描述
我很难确定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>
1 个解决方案
解决方案1
0 已采纳 2016-09-16 19:16:51
Dreamweaver有时不能很好地编译代码（至少在Dreamweaver 8时代，当我开发该代码时）请放松。
在所需的最常用的浏览器中测试代码。
在这里检查您自己的示例，所有内容都是一致的，并且像魅力一样起作用。
为什么相对位置和向左浮动会导致多级导航下拉显示异常？
[英]Why position relative and float left causing multilevel navigational drop down behave unexpectedly?
position和float导致CSS下拉菜单中出现无法解释的行为
[英]position and float causing unexplainable behaviour in CSS dropdown
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.