html - 当 'floated' 时，div 相交并拒绝并排显示

Question

我最近得到了一个纯 CSS Accordion ，可以在许多网页上使用。我想在 Accordion 上方添加两个 div 元素并让它们并排显示。我用 float 来做这个，当我做所有元素时，它们都是这样相交的:

我尝试指定容器的宽度(一次尝试百分比，一次尝试像素值)，但这并不好。我有一种糟糕的感觉，我遗漏了一些明显的东西和/或我让编码太忙了，现在有冲突了。

这是 html:

<div class="aboutus">



<div class="ac-container-info left">
<label>About Politeia</label>
<div class="verticalLine">
Lorem ipsum dolor sit amet, quas vocent impedit id duo. Brute errem id mei, ignota regione principes ne has. Dicit admodum ocurreret cum ea, eius neglegentur vix ei, soleat semper deterruisset an duo. Ut graeci aliquam interesset has. Qui iusto signiferumque id, vel idque nonumes suscipiantur an. Eu oblique tibique mei, no novum eruditi sea.


</div>
<div 'clear:both'>&nbsp;</div>

<div class="ac-container-links right">
<label>Info Links</label>

</div>
</div>

<div 'clear:both'>&nbsp;</div>

<div="accords">

<section class="ac-container">
                <div>
                    <input id="ac-2" name="accordion-1" type="checkbox">
                    <label for="ac-2">The Rules</label>
                    <article class="ac-large">
                        <p>

Here at Politeia, our rules are pretty simple. We know you guys get the basics (respect, don't set things on fire, etc), so we'll skip over those and list the need-to-know. 
<br>
<br>
If you're confused about something in the rules or concerned about rule-breaking, please feel free to contact an admin. We're here to help! 
<br>
<br>
<br>
<h>Registration</h><br>
<br>
Register with an OOC account! 
<br>
<br>
Register your character's name in proper caps (i.e. John Smith). You can register a character with their full name (James Dean), their nickname + surname (Jimmy Dean), or an alias if it's applicable (The Sausage King).
<br>
<br>
As this is an adult-oriented board, we ask that characters (and their PBs) be 18 years or older.
<br>
<br>
<br>
<h>Activity</h><br>
<br>
We have relaxed standards of activity. There are no activity checks or posting demands. You can post fifty times a day or once a month. 
<br>
<br>
An admin may reach out to you after a long stretch of time without activity to ask if you're still interested in playing a character, but you will not be asked to do anything more than answer 'yes' or 'no.' 
<br>
<br>
The only exception to our activity requirements (or lack thereof) are in regards to characters in important positions. A character's absence will be noted IC and may result in IC consequences (a demotion, a firing, etc).
<br>
<br>
<br>
<h>Graphics</h><br>
<br>
Playbys/face claims must be real people. 
<br>
<br>
You may use anyone of note as a PB (models, musicians, actors, and so forth). For small-time models on Dev Art or otherwise, we would prefer you have express permission to use their material for graphics (example: Rachel Dashae has publicly said you can use her face as a PB).
<br>
<br>
Icons are 200x300. We do not allow signatures at this time.
</p>
                    </article>
                </div>
                <div>
                    <input id="ac-3" name="accordion-1" type="checkbox">
                    <label for="ac-3">The Plot</label>
                    <article class="ac-large">
                        <p>I need to write this. </p>
                    </article>
                </div>
                <div>
                    <input id="ac-4" name="accordion-1" type="checkbox">
                    <label for="ac-4">Frequently Asked Questions</label>
                    <article class="ac-large">
                        <p>Here are the answers to some questions you might have had about Politeia. More questions and answers might be added as we go along!
<br>
<br>

<b>So what time period is Politeia set in, anyway?</b><br>
<br>
Politeia is set in the future, long after a big ole war turned everything upside down. The world's population lowered. Radiation made certain areas uninhabitable and caused some freaky side effects on the people who stuck around.<br>
<br>
However, the major cultural shifts that resulted from the war included a greater appreciation for the early 20th century and Hellenistic time periods. It's why the aesthetics of Politeia have a lot of shout-outs to these eras.<br>
<br>
<br>
<b>Wait, so I have to play my character like it's 1916? With the fashions and everything?</b><br>
<br>
Nope! Even though the aesthetic might be early 20th century, the ideals of the early 20th century have not carried over. Here there are all the freedoms of modern ideals with all the fun of old timey fashions, pretty much.<br>
<br>
As for the fashions...weeeell, it's what's fashionable. It's what the hoity toity in society (i.e. the Aristocracy) would be caught wearing. That doesn't necessarily mean your character has to dress this way, especially if they're in a lower tier of society. Said character might get some weird looks from the more fashion-conscious members of society or other snobby sorts, though.<br>
<br>
If you'd like to read about some examples of early 20th century fashion, check <URL=http://www.vam.ac.uk/page/0-9/20th-century-fashion/>here</URL>.<br>
<br>
<br>
<b>Are there limits on powers? Like how many my character can have? Are any powers banned?</b><br>
<br>
Yes, there are certain limits on powers, both in terms of how powerful a character can be and how many powers a single character can have. At the moment, there aren't many powers that are outright banned. <br>
<br>

The limitations that are in place hopefully allow for some wiggle room, and it's strongly encouraged for members to discuss their characters' abilities with an admin if they have any questions, concerns, or ideas they want to get a second opinion on before moving forward.<br>
<br>
<br>

<b>Is there any weird futuristic slang I need to worry about on Politeia?</b><br>
<br>

We have no plans to turn this into a <i>Clockwork Orange</i> or <i>Juno</i> situation, so we will not be overseeing your use of language. If you want an excuse, think of it as a form of translation convention. Makes it easier for you and other readers to grasp what's going on in posts.
</p>
                    </article>
                </div>

                <div>
                    <input id="ac-5" name="accordion-1" type="checkbox">
                    <label for="ac-5">Abilities</label>
                    <article class="ac-large">
                        <p>

<quote>Banned</quote><br>
<subquote>powers currently forbidden...</subquote><br>
<br>

<b>Timeline Manipulation</b> -- Powers that manipulate the course of time (i.e. reversing events, interfering with the past, traveling to the future). Powers that allow a character to <i>see</i> events in the past or potential events in the future are fine!<br>
<br>
<b>Omnipotence/Omnipresence/Omniscience</b> -- No all-knowing, all-powerful, all-present characters. Basically, no powers that imply a "sure thing."<br>
<br>
<b>Permanent Power Negation/Augmentation/Absorption</b> -- The permanent negation, augmentation, or absorption of another character's powers is forbidden. Temporary negation, augmentation, and absorption is fine.





</p>
                    </article>
                </div>
            </section>

</div>

















</div>

</div>

还有 CSS:

/****************************************
 About Us
*****************************************/



.right{float:right}
.left{float:left}

.ac-container-info {
display: inline-block;
width: 60%;
position: relative;

}

.ac-container-links {

display: inline-block;
width: 40%;
position: relative;


}


.verticalLine {
    border-right: 1px dotted #bbb;
}

.ac-container {
    width: auto;
    margin: 10px auto 30px auto;
    position: relative;
}


.aboutus label {

    font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);
    letter-spacing: 2px;
   margin-bottom: 10px;

}

.ac-container label{
    font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);
    letter-spacing: 2px;
}


.ac-container label:hover{
    background: #fff;
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: #f8f8f8;
    color: #777;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(../images/arrow_down.png) no-repeat center center;  
}

.ac-container input:checked + label:hover:after{
    background-image: url(../images/arrow_up.png);
}

.ac-container input{
    display: none;
}

.ac-container article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow-y: auto;
    height: 0px;
    position: relative;
    z-index: 10;
    transition: 
        height 0.3s ease-in-out, 
        box-shadow 0.6s linear;
}

.ac-container input:checked ~ article{
    transition: 
        height 0.5s ease-in-out, 
        box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

.ac-container article p{
    font-style: normal;
    color: #777;
    text-align: justify;
    line-height: 23px;
    font-size: 14px;
    padding: 50px;
    margin: 10px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.ac-container article h {

font-size: 20px;
font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;

}

.ac-container input:checked ~ article.ac-small{
    height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
    height: 280px;
}
.ac-container input:checked ~ article.ac-large{
    height: 550px;
}


.groupinfo quote {

font-size: 20px;
font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;

}

.groupinfo subquote {


font-size: 15px;
font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;
letter-spacing: 1px;

}


.aboutus quote {

font-size: 20px;
font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;

}

.aboutus subquote {


font-size: 15px;
font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;
letter-spacing: 1px;

}

Answer 1

您的解释不够清楚...请检查此调试代码，看看这是否是您想要的:

body {
	
	overflow:scroll;	
	
}


.right{
	
	float:right;
	
}
.left{
	
	float:left;
	
}

.ac-container-info {
display: inline-block;
width: 60%;
position: relative;

}

.ac-container-links {

display: inline-block;
width: 40%;
position: relative;


}


.verticalLine {
    border-right: 1px dotted #bbb;
	padding:10px 30px 10px 30px;
}

.ac-container {
    width: 100%;
    margin: 70px auto 30px auto;
    position: relative;
}


.aboutus label {

    font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);
    letter-spacing: 2px;
   margin-bottom: 10px;

}

.ac-container label{
    font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);
    letter-spacing: 2px;
}


.ac-container label:hover{
    background: #fff;
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: #f8f8f8;
    color: #777;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(../images/arrow_down.png) no-repeat center center;  
}

.ac-container input:checked + label:hover:after{
    background-image: url(../images/arrow_up.png);
}

.ac-container input{
    display: none;
}

.ac-container article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow-y: auto;
    height: 0px;
    position: relative;
    z-index: 10;
    transition: 
        height 0.3s ease-in-out, 
        box-shadow 0.6s linear;
}

.ac-container input:checked ~ article{
    transition: 
        height 0.5s ease-in-out, 
        box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

.ac-container article p{
    font-style: normal;
    color: #777;
    text-align: justify;
    line-height: 23px;
    font-size: 14px;
    padding: 50px;
    margin: 10px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.ac-container article h {

font-size: 20px;
font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;

}

.ac-container input:checked ~ article.ac-small{
    height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
    height: 280px;
}
.ac-container input:checked ~ article.ac-large{
    height: 550px;
}


.groupinfo quote {

font-size: 20px;
font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;

}

.groupinfo subquote {


font-size: 15px;
font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;
letter-spacing: 1px;

}


.aboutus quote {

font-size: 20px;
font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;

}

.aboutus subquote {


font-size: 15px;
font-family: 'Pathway Gothic One', 'Arial Narrow', Arial, sans-serif;
letter-spacing: 1px;

}

<div style="direction: rtl; height: 100%; ">
  <div style="direction: ltr; padding: 3px;">
  
	<div class="aboutus">


		<div class="ac-container-info left">
		<label>About Politeia</label>
			<div class="verticalLine">
				Lorem ipsum dolor sit amet, quas vocent impedit id duo. Brute errem id mei, ignota regione principes ne has. Dicit admodum ocurreret cum ea, eius neglegentur vix ei, 							soleat semper deterruisset an duo. Ut graeci aliquam interesset has. Qui iusto signiferumque id, vel idque nonumes suscipiantur an. Eu oblique tibique mei, no novum eruditi sea.


			</div>
        </div>
            
            


		<div class="ac-container-links right">
		<label>Info Links</label>

		</div>
	</div>

	<div 'clear:both'>&nbsp;</div>

	<div>

		<section class="ac-container">
                
                <div>
                    <input id="ac-2" name="accordion-1" type="checkbox">
                    <label for="ac-2">The Rules</label>
                    <article class="ac-large">
                        <p>

							Here at Politeia, our rules are pretty simple. We know you guys get the basics (respect, don't set things on fire, etc), so we'll skip over those and list 	the need-to-know. 
<br>
<br>
If you're confused about something in the rules or concerned about rule-breaking, please feel free to contact an admin. We're here to help! 
<br>
<br>
<br>
<h>Registration</h><br>
<br>
Register with an OOC account! 
<br>
<br>
Register your character's name in proper caps (i.e. John Smith). You can register a character with their full name (James Dean), their nickname + surname (Jimmy Dean), or an alias if it's applicable (The Sausage King).
<br>
<br>
As this is an adult-oriented board, we ask that characters (and their PBs) be 18 years or older.
<br>
<br>
<br>
<h>Activity</h><br>
<br>
We have relaxed standards of activity. There are no activity checks or posting demands. You can post fifty times a day or once a month. 
<br>
<br>
An admin may reach out to you after a long stretch of time without activity to ask if you're still interested in playing a character, but you will not be asked to do anything more than answer 'yes' or 'no.' 
<br>
<br>
The only exception to our activity requirements (or lack thereof) are in regards to characters in important positions. A character's absence will be noted IC and may result in IC consequences (a demotion, a firing, etc).
<br>
<br>
<br>
<h>Graphics</h><br>
<br>
Playbys/face claims must be real people. 
<br>
<br>
You may use anyone of note as a PB (models, musicians, actors, and so forth). For small-time models on Dev Art or otherwise, we would prefer you have express permission to use their material for graphics (example: Rachel Dashae has publicly said you can use her face as a PB).
<br>
<br>
Icons are 200x300. We do not allow signatures at this time.
			</p>
                    </article>
                </div>
                <div>
                    <input id="ac-3" name="accordion-1" type="checkbox">
                    <label for="ac-3">The Plot</label>
                    <article class="ac-large">
                        <p>I need to write this. </p>
                    </article>
                </div>
                <div>
                    <input id="ac-4" name="accordion-1" type="checkbox">
                    <label for="ac-4">Frequently Asked Questions</label>
                    <article class="ac-large">
                    
                        <p>
                        
                        Here are the answers to some questions you might have had about Politeia. More questions and answers might be added as we go along!
<br>
<br>

<b>So what time period is Politeia set in, anyway?</b><br>
<br>
Politeia is set in the future, long after a big ole war turned everything upside down. The world's population lowered. Radiation made certain areas uninhabitable and caused some freaky side effects on the people who stuck around.<br>
<br>
However, the major cultural shifts that resulted from the war included a greater appreciation for the early 20th century and Hellenistic time periods. It's why the aesthetics of Politeia have a lot of shout-outs to these eras.<br>
<br>
<br>
<b>Wait, so I have to play my character like it's 1916? With the fashions and everything?</b><br>
<br>
Nope! Even though the aesthetic might be early 20th century, the ideals of the early 20th century have not carried over. Here there are all the freedoms of modern ideals with all the fun of old timey fashions, pretty much.<br>
<br>
As for the fashions...weeeell, it's what's fashionable. It's what the hoity toity in society (i.e. the Aristocracy) would be caught wearing. That doesn't necessarily mean your character has to dress this way, especially if they're in a lower tier of society. Said character might get some weird looks from the more fashion-conscious members of society or other snobby sorts, though.<br>
<br>
If you'd like to read about some examples of early 20th century fashion, check <URL=http://www.vam.ac.uk/page/0-9/20th-century-fashion/>here</URL>.<br>
<br>
<br>
<b>Are there limits on powers? Like how many my character can have? Are any powers banned?</b><br>
<br>
Yes, there are certain limits on powers, both in terms of how powerful a character can be and how many powers a single character can have. At the moment, there aren't many powers that are outright banned. <br>
<br>

The limitations that are in place hopefully allow for some wiggle room, and it's strongly encouraged for members to discuss their characters' abilities with an admin if they have any questions, concerns, or ideas they want to get a second opinion on before moving forward.<br>
<br>
<br>

<b>Is there any weird futuristic slang I need to worry about on Politeia?</b><br>
<br>

We have no plans to turn this into a <i>Clockwork Orange</i> or <i>Juno</i> situation, so we will not be overseeing your use of language. If you want an excuse, think of it as a form of translation convention. Makes it easier for you and other readers to grasp what's going on in posts.
			</p>
                    </article>
                </div>

                <div>
                    <input id="ac-5" name="accordion-1" type="checkbox">
                    <label for="ac-5">Abilities</label>
                    <article class="ac-large">
                        <p>

<quote>Banned</quote><br>
<subquote>powers currently forbidden...</subquote><br>
<br>

<b>Timeline Manipulation</b> -- Powers that manipulate the course of time (i.e. reversing events, interfering with the past, traveling to the future). Powers that allow a character to <i>see</i> events in the past or potential events in the future are fine!<br>
<br>
<b>Omnipotence/Omnipresence/Omniscience</b> -- No all-knowing, all-powerful, all-present characters. Basically, no powers that imply a "sure thing."<br>
<br>
<b>Permanent Power Negation/Augmentation/Absorption</b> -- The permanent negation, augmentation, or absorption of another character's powers is forbidden. Temporary negation, augmentation, and absorption is fine.





</p>
                    </article>
                </div>
        </section>

	</div>

 </div>
</div>