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

时间：2016-09-16 19:06:44

标签： html css dreamweaver

我很难尝试修复DIV的位置。 浏览器中的代码和位置似乎没问题。

但是在Dreamweaver预览中，DIV位于指定的空间之外：

enter image description here

问题似乎是＆＃34; float：left＆＃34; on .th_block_info_container（第21行）

这会影响网站，还是只是Dreamweaver问题？

非常感谢任何帮助。

感谢。

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

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

在最常用的浏览器中测试您的代码。

在这里查看你自己的例子，一切都是对齐的，像魅力一样工作。

相关问题
最新问题