无法让div正确浮动,它会被推倒

时间:2015-10-01 16:54:59

标签: html css html5

在这个问题上抓了一会儿老头。我尝试过很多东西,但我不能让登录div正确地对齐顶部。由于某种原因,它被推到主文章div下面。我觉得我有太多嵌套的div。请帮助noobie。

我的网站是www.project-paleo.co.uk

以下是主要indec包装器的代码:



div.indexcontent {
vertical-align: top;
width: 970px;

}

div.newsext {
text-align: left;
clear: none;
width: 680px;
float: left;
border-width: 7px 7px 7px 7px;
  border-image: url("images/boxborder3.png") 7 7 7 7 round;
}

div.indexforumext {
text-align: left;
width: 680px;
float: left;
border-width: 7px 7px 7px 7px;
  border-image: url("images/boxborder3.png") 7 7 7 7 round;
}


div.newshead{
background-image:  url("images/divhead.png");
background-color: #0e141f;
background-repeat: no-repeat;
padding-left: 5px;
display: inline;
}

div.newscontent {
background-image:  url("images/cbox.png");
background-color: #0e141f;
background-repeat: no-repeat;
padding: 10px;
}

div.rightbox {
width: 250px;
float: left;
border-width: 7px 7px 7px 7px;
border-image: url("images/boxborder3.png") 7 7 7 7 round;

}

<div class="indexcontent">

		<div class ="newsext">
		<div class ="newsint">

			<article class ="post">

				<div class ="newshead">

				<div>
				<img id="Project Paleo" src="<?php echo get_bloginfo('template_directory');?>/images/note.png" alt="" height="35" width="30"/>
				</div>

				<div class="newstitle">
				<h2><a href="<?php the_permalink(); ?>"> <?php the_title() ;?></a></h2>
				</div>

				</div>

				<div class ="newscontent">
				<?php the_content(); ?>
				</div>

			</article>

		</div> <!-- Newsint -->
		</div> <!-- Newsext -->

		<div class ="indexforumext">
			<div class ="indexforumint">

				<?php echo do_shortcode("[bbp-forum-index]"); ?>

			</div> <!-- indexforumint -->
	
		</div> <!-- indexforumext -->


		<div class ="rightbox">

			<div class ="rbhead">
			
				<h2> Server Map </h2>

			</div>

			<div class ="login">

				<?php echo do_shortcode("[login_widget]"); ?>

			</div>

		</div>


</div> <!-- IndexContent -->
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

问题是由/Users/Shared/Jenkins/Home/jobs/iOS_feature/workspace/build/Applications/MyApp.app/Frameworks/libswiftUIKit.dylib: User interaction is not allowed. *** error: Couldn't codesign /Users/Shared/Jenkins/Home/jobs/iOS_feature/workspace/build/Applications/MyApp.app/Frameworks/libswiftUIKit.dylib: codesign failed with exit code 1 元素引起的。您应该将<div class ="indexforumint"><div class ="indexforumint">包装在<div class ="newsint">中,然后浮动包装div。

见:

<强> HTML

<div>

CSS

<div class="indexcontent">

<div class="left-wrapper"> <!-- added this div as a wrapper !-->
    <div class ="newsext">
        <div class ="newsint">

            <article class ="post">

                <div class ="newshead">

                <div>
                <img id="Project Paleo" src="<?php echo get_bloginfo('template_directory');?>/images/note.png" alt="" height="35" width="30"/>
                </div>

                <div class="newstitle">
                <h2><a href="<?php the_permalink(); ?>"> <?php the_title() ;?></a></h2>
                </div>

                </div>

                <div class ="newscontent">
                <?php the_content(); ?>
                </div>

            </article>

        </div> <!-- Newsint -->
    </div> <!-- Newsext -->

    <div class ="indexforumext">
        <div class ="indexforumint">

            <?php echo do_shortcode("[bbp-forum-index]"); ?>

        </div> <!-- indexforumint -->

    </div> <!-- indexforumext -->
</div> <!-- left-wrapper -->

<div class ="rightbox">

    <div class ="rbhead">

        <h2> Server Map </h2>

    </div>

    <div class ="login">

            <?php echo do_shortcode("[login_widget]"); ?>

    </div>

</div>

希望有所帮助!

答案 1 :(得分:0)

添加

position:absolute;
top:5px;
right:5px;

到CSS中的div.rightbox

答案 2 :(得分:0)

我看到你的主要容器/持有人/包装(.indexcontent)没有位置:相对,使用position:absolute on&#39; .rightbox&#39;不会把盒子带到正确的位置。所以试试这个代码

.indexcontent{
    position:relative;
}

.rightbox{
    float: none;
    position: absolute;
    right: 0px;
}