我有两个嵌套在另一个内部的div，无论我尝试过什么，我都无法将第二个嵌套div（bookmarklet-wrapper）浮动到第一个（form-wrapper）旁边？我想也许这与宽度有关，但这没有帮助，也尝试使用“clearfix”，但这仍然无济于事。
我的HTML如下：
<div id="prof-wrapper">
<div id="editprofile-form-wrapper">
<div id="title">
<h1>Edit Profile</h1>
<p>This information appears on your personal user page</p>
</div><!--End of title-->
<div class="form-horizontal">
<?php if(isset($image)){echo $image;}?>
<div id="thumbs" style="width:300px"></div>
<form id="cropimage" method="post" enctype="multipart/form-data">
<fieldset class="control-group">
<label class="control-label" for="firstname">Firstname</label>
<div class="controls">
<input id="firstname" type="text" name="fname">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="lastname">Surname</label>
<div class="controls">
<input id="lastname" type="text" name="secound">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input id="email" type="text" name="email">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="user_location">Location</label>
<div class="controls">
<input id="user_location" type="text" value="" name="user[location]">
<p>Where art thou?</p>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="bio">Bio</label>
<div id="user_description_box" class="controls">
<textarea id="bio" class="input-xlarge" name="bio" style="width: 243px; height: 122px;"></textarea>
<p class="bio-label">About yourself in<strong>160</strong>characters or less.</p>
</div>
</fieldset>
<div class="form-actions">
<button id="submitButton" class="btn primary-btn" type="submit" name="submit">Save changes</button>
</div>
</form>
<form id="cropimage" method="post" enctype="multipart/form-data">
<fieldset class="control-group">
<label class="control-label" for="photoimg">Profile photo upload</label>
<div id="user_description_box" class="controls">
<input id="photoimg" type="file" value="" name="photoimg">
<input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" />
<!--<p class="bio-label">About yourself in <strong>160</strong> characters or less.</p>-->
</div>
</fieldset>
<div class="form-actions">
<input type="submit" class="btn primary-btn" id="photoSubmit" name="submit" value="Photo Submit" />
</div>
</form>
</div><!--End of horizontal form-->
</div><!--End of form wrapper-->
<div class="clearfix"></div>
<!-----------------------------------------Start of bookmarklet-------------------------------------------------->
<div id="bookmarklet-wrapper">
<h1 id="welcometext">Welcome to <img src="images/logo_text.png" alt="NetSushi Logo" title="Net Sushi" id="instrustionlogo" width="100px"/></h1>
<h2 id="bminstructions">The Bookmarklet below should be dragged to your bookmarks bar so that you can share content with your friends on <!--<img src="images/logo_text.png" alt="NetSushi Logo" title="Net Sushi" id="instrustionlogo" width="100px"/>
<a style="text-decoration:none;
background:#25A6E1;
background:-moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
background:-webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:linear-gradient(top,#25A6E1 0%,#188BC0 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
padding:8px 13px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #1A87B9;
position: relative;
top: 20px;"
href="javascript:
(function () {
function loadjscssfile(filename, filetype){
if (filetype=='js'){
var fileref=document.createElement('script');
fileref.setAttribute('type','text/javascript');
fileref.setAttribute('id','jsDoc');
fileref.setAttribute('src', filename);
}else if (filetype=='css'){
var fileref=document.createElement('link');
fileref.setAttribute('rel', 'stylesheet');
fileref.setAttribute('id', 'cssDoc');
fileref.setAttribute('type', 'text/css');
fileref.setAttribute('href', filename);
}
if (typeof fileref!='undefined')
document.getElementsByTagName('head')[0].appendChild(fileref);
}
var cssDoc = document.getElementById('cssDoc');
if (cssDoc == null){
loadjscssfile('http://www.netsushi.net/css/css/bookmarklet.css', 'css');
}
var jsDoc = document.getElementById('jsDoc');
if (jsDoc == null){
loadjscssfile('http://www.netsushi.net/js/bookmarklet.js', 'js');
}else{
if ($('#feeder_bm_main').is(':visible')){
$('#feeder_bm_main').hide();
}else{
$('#feeder_bm_main').show();
}
}
void(0)
}())
;"-->
>NetSushi</a>
</div><!--End of bookmarklet wrapper-->
</div><!--end of edit-page-content-->
我仍然不确定如何正确地格式化CSS以发布它但是如果你有时间帮助我，你可以准确地看到这个小提琴里发生了什么？
答案 0 :(得分：2)
如果您只是将float: left添加到form-wrapper，则应该有效：http://jsfiddle.net/3gMuP/1/
答案 1 :(得分：2)
你也可以使用display：inline-block;在你希望彼此相邻的2个div中。
答案 2 :(得分：0)
这对我有用：
#editprofile-form-wrapper {
width: 50%;
float: left;
}
我没有任何其他的CSS，而且2列现在彼此相邻。