我有以下网页:
我正在尝试将左下角的红色边框移到绘制的红色框中。 (主要内容旁边,3.5%右边距)
无论如何,我的代码似乎都不起作用。
body { margin-top:20px; margin-right:0; margin-left:0; margin-bottom:0; overflow: auto; background-color:#FFFFF0; } .cap { text-transform: capitalize; } .p { color:#37FDFC; max-height:inherit; } #container { width:90%; margin:auto; background-color:#F6F4F1; border: 5px solid #00b4b4; padding:0; border-radius: 25px; } #header { width:100%; top:0; } #header p { text-align:right; margin-right:3%; } #footer { width:100%; bottom:0; color:#838B8B; font-family:verdana; } #footer:after { content: ""; clear: both; display: table; } .register_form { border-radius: 6px; border: 4px solid #C1CDCD; width:70%; } #register_form { margin-left:4%; border-right: 2px dotted #00CDCD; width:30%; margin-right:0%; display:inline-block; } #register_form h2 { color:#00CDCD; font-family:verdana; } #side_text { width:30%; float:right; margin-right:30%; } #side_text h3 { color:#00CDCD; font-family:verdana; } #side_text p { color:#838B8B; font-family:verdana; } #login_form { margin-left:4%; border-right: 2px dotted #00CDCD; width:30%; margin-right:0%; display:inline-block; } #login_form h2 { color:#00CDCD; font-family:verdana; } .login_form { border-radius: 6px; border: 4px solid #C1CDCD; width:70%; } #just_registered_text { text-align:center; color:#00CDCD; font-family:verdana; } #errors { float: left; margin-left:4.5%; text-align:left; color:red; } #other { float: right; text-align:right; margin-right:3%; display:inline-block; } #profile_name_div { margin-left:3%; color: #00b4b4; font-size: 27px; font-family:verdana; font-weight: 700; display:inline; } #change_settings a { margin-left:5%; color:lightblue; font-size: 16px; font-family:verdana; font-weight: 700; } #settings_space h2 { margin-left:3%; color:#00CDCD; font-size: 27px; font-family:verdana; font-weight: 700; } #settings_space textarea { overflow: hidden; resize: none; border: 2px solid #00CDCD; margin-left:3%; border-radius: 8px; } #settings_space:first-letter { text-transform: capitalize; } #settings_space label { margin-left:8%; color: #009acd; } .settings_submit { margin-left:5%; } .info { margin-left:3%; display:inline; color:#838B8B; font-family:verdana; width:100%; } #photo { display:block; border: 1px solid black; width:200px; height:200px; margin-left:3.5%; } #actual_photo { width:200px; height:200px; } #change_pp { background:#f9f9f9; border-bottom: 1px dashed #ccc; border-top: 1px dashed #ccc; border-left: 1px dashed #ccc; border-right: 1px dashed #ccc; width:200px; margin-left:3.5%; padding:0; } #proj { display: none; } #button { width:100%; } #change_pp input[type=file] { width:100%; } .info > b { color:#00CDCD; } #about_me_header { margin-left:3.5%; color:#B4CDCD; border: 5px solid #00b4b4; border-radius:20px; width:50%; } #about_section { border:2px solid red; width:30%; }<div id='container'> <div id='header'> <p>The current date is $date:</p> </div> <span id="profile_name_div"> example </span> <span id="change_settings"> <a href='account_settings.php'>Change Settings</a> </span> <div id="photo">example</div> <div id="change_pp"> <button id="button" onclick="showForm()" >Change Profile Picture</button> <form id="proj" action="include/form_handle.php" method="POST" enctype="multipart/form-data"> <input type="file" value="change" name="pp_file"/> <input type="submit" name="pp_submit" value="Upload Photo"/> </form> </div> <div id="about_section"> <h1 id="about_me_header">About me header</h1> <br/> <div class="info"><b>Bio: </b>text</div> <br/><br/> <div class="info"><b>Interests: </b>text</div> <br/><br/> <div class="info"><b>Favorite Quotes: </b>text</div> <div id='footer'></div> </div> </div>JSFIDDLE: https ://jsfiddle.net/8jczhzaL/2/
我试过浮动div并没有任何作用。我如何将我的div旁边的其他div移到左边? 为什么没有浮动工作?
I have the following webpage:
I am trying to move the bottom-left, red-bordered div to the drawn red box. (Next to main content, 3.5% right margin)
My code doesnt seem to be working no matter what though.
body { margin-top:20px; margin-right:0; margin-left:0; margin-bottom:0; overflow: auto; background-color:#FFFFF0; } .cap { text-transform: capitalize; } .p { color:#37FDFC; max-height:inherit; } #container { width:90%; margin:auto; background-color:#F6F4F1; border: 5px solid #00b4b4; padding:0; border-radius: 25px; } #header { width:100%; top:0; } #header p { text-align:right; margin-right:3%; } #footer { width:100%; bottom:0; color:#838B8B; font-family:verdana; } #footer:after { content: ""; clear: both; display: table; } .register_form { border-radius: 6px; border: 4px solid #C1CDCD; width:70%; } #register_form { margin-left:4%; border-right: 2px dotted #00CDCD; width:30%; margin-right:0%; display:inline-block; } #register_form h2 { color:#00CDCD; font-family:verdana; } #side_text { width:30%; float:right; margin-right:30%; } #side_text h3 { color:#00CDCD; font-family:verdana; } #side_text p { color:#838B8B; font-family:verdana; } #login_form { margin-left:4%; border-right: 2px dotted #00CDCD; width:30%; margin-right:0%; display:inline-block; } #login_form h2 { color:#00CDCD; font-family:verdana; } .login_form { border-radius: 6px; border: 4px solid #C1CDCD; width:70%; } #just_registered_text { text-align:center; color:#00CDCD; font-family:verdana; } #errors { float: left; margin-left:4.5%; text-align:left; color:red; } #other { float: right; text-align:right; margin-right:3%; display:inline-block; } #profile_name_div { margin-left:3%; color: #00b4b4; font-size: 27px; font-family:verdana; font-weight: 700; display:inline; } #change_settings a { margin-left:5%; color:lightblue; font-size: 16px; font-family:verdana; font-weight: 700; } #settings_space h2 { margin-left:3%; color:#00CDCD; font-size: 27px; font-family:verdana; font-weight: 700; } #settings_space textarea { overflow: hidden; resize: none; border: 2px solid #00CDCD; margin-left:3%; border-radius: 8px; } #settings_space:first-letter { text-transform: capitalize; } #settings_space label { margin-left:8%; color: #009acd; } .settings_submit { margin-left:5%; } .info { margin-left:3%; display:inline; color:#838B8B; font-family:verdana; width:100%; } #photo { display:block; border: 1px solid black; width:200px; height:200px; margin-left:3.5%; } #actual_photo { width:200px; height:200px; } #change_pp { background:#f9f9f9; border-bottom: 1px dashed #ccc; border-top: 1px dashed #ccc; border-left: 1px dashed #ccc; border-right: 1px dashed #ccc; width:200px; margin-left:3.5%; padding:0; } #proj { display: none; } #button { width:100%; } #change_pp input[type=file] { width:100%; } .info > b { color:#00CDCD; } #about_me_header { margin-left:3.5%; color:#B4CDCD; border: 5px solid #00b4b4; border-radius:20px; width:50%; } #about_section { border:2px solid red; width:30%; }<div id='container'> <div id='header'> <p>The current date is $date:</p> </div> <span id="profile_name_div"> example </span> <span id="change_settings"> <a href='account_settings.php'>Change Settings</a> </span> <div id="photo">example</div> <div id="change_pp"> <button id="button" onclick="showForm()" >Change Profile Picture</button> <form id="proj" action="include/form_handle.php" method="POST" enctype="multipart/form-data"> <input type="file" value="change" name="pp_file"/> <input type="submit" name="pp_submit" value="Upload Photo"/> </form> </div> <div id="about_section"> <h1 id="about_me_header">About me header</h1> <br/> <div class="info"><b>Bio: </b>text</div> <br/><br/> <div class="info"><b>Interests: </b>text</div> <br/><br/> <div class="info"><b>Favorite Quotes: </b>text</div> <div id='footer'></div> </div> </div>JSFIDDLE: https://jsfiddle.net/8jczhzaL/2/
I have tried floating divs and nothing works.How can I move my div next to the other divs to the left? And why doesnt floating work?
最满意答案
我给你左边的内容封装了一下,然后把它留下了。 这应该和你正在寻找的东西非常接近 - 只需要改变一些边距,让所有东西都按照你想要的方式排列:
现场演示:
body { margin-top:20px; margin-right:0; margin-left:0; margin-bottom:0; overflow: auto; background-color:#FFFFF0; } .cap { text-transform: capitalize; } .p { color:#37FDFC; max-height:inherit; } #container { width:90%; margin:auto; background-color:#F6F4F1; border: 5px solid #00b4b4; padding:0; border-radius: 25px; } #header { width:100%; top:0; } #header p { text-align:right; margin-right:3%; } #footer { width:100%; bottom:0; color:#838B8B; font-family:verdana; } #footer:after { content:""; clear: both; display: table; } .register_form { border-radius: 6px; border: 4px solid #C1CDCD; width:70%; } #register_form { margin-left:4%; border-right: 2px dotted #00CDCD; width:30%; margin-right:0%; display:inline-block; } #register_form h2 { color:#00CDCD; font-family:verdana; } #side_text { width:30%; float:right; margin-right:30%; } #side_text h3 { color:#00CDCD; font-family:verdana; } #side_text p { color:#838B8B; font-family:verdana; } #login_form { margin-left:4%; border-right: 2px dotted #00CDCD; width:30%; margin-right:0%; display:inline-block; } #login_form h2 { color:#00CDCD; font-family:verdana; } .login_form { border-radius: 6px; border: 4px solid #C1CDCD; width:70%; } #just_registered_text { text-align:center; color:#00CDCD; font-family:verdana; } #errors { float: left; margin-left:4.5%; text-align:left; color:red; } #other { float: right; text-align:right; margin-right:3%; display:inline-block; } #profile_name_div { margin-left:3%; color: #00b4b4; font-size: 27px; font-family:verdana; font-weight: 700; display:inline; } #change_settings a { margin-left:5%; color:lightblue; font-size: 16px; font-family:verdana; font-weight: 700; } #settings_space h2 { margin-left:3%; color:#00CDCD; font-size: 27px; font-family:verdana; font-weight: 700; } #settings_space textarea { overflow: hidden; resize: none; border: 2px solid #00CDCD; margin-left:3%; border-radius: 8px; } #settings_space:first-letter { text-transform: capitalize; } #settings_space label { margin-left:8%; color: #009acd; } .settings_submit { margin-left:5%; } .info { margin-left:3%; display:inline; color:#838B8B; font-family:verdana; width:100%; } #photo { display:block; border: 1px solid black; width:200px; height:200px; margin-left:3.5%; } #actual_photo { width:200px; height:200px; } #change_pp { background:#f9f9f9; border-bottom: 1px dashed #ccc; border-top: 1px dashed #ccc; border-left: 1px dashed #ccc; border-right: 1px dashed #ccc; width:200px; margin-left:3.5%; padding:0; } #proj { display: none; } #button { width:100%; } #change_pp input[type=file] { width:100%; } .info > b { color:#00CDCD; } #about_me_header { margin-left:3.5%; color:#B4CDCD; border: 5px solid #00b4b4; border-radius:20px; width:50%; } #about_section { border:2px solid red; width:30%; float: right; } #left_section { float: left; }<body> <div id='container'> <div id='header'> <p>The current date is $date:</p> </div> <span id="profile_name_div"> example </span> <span id="change_settings"> <a href='account_settings.php'>Change Settings </a> <br /> </span> <div id="left_section"> <div id="photo">example</div> <div id="change_pp"> <button id="button" onclick="showForm()">Change Profile Picture</button> <form id="proj" action="include/form_handle.php" method="POST" enctype="multipart/form-data"> <input type="file" value="change" name="pp_file" /> <input type="submit" name="pp_submit" value="Upload Photo" /> </form> </div> </div> <div id="about_section"> <h1 id="about_me_header">About me header</h1> <br/> <div class="info"><b>Bio: </b>text</div> <br/> <br/> <div class="info"><b>Interests: </b>text</div> <br/> <br/> <div class="info"><b>Favorite Quotes: </b>text</div> <div id='footer'></div> </div> <div style="clear: both;"></div> </body>JSFiddle版本: https ://jsfiddle.net/8jczhzaL/3/
I gave your left content a wrapper and floated it left. This should be pretty close to what you're looking for - just change some of the margins to get everything to line up exactly how you want it:
Live Demo:
body { margin-top:20px; margin-right:0; margin-left:0; margin-bottom:0; overflow: auto; background-color:#FFFFF0; } .cap { text-transform: capitalize; } .p { color:#37FDFC; max-height:inherit; } #container { width:90%; margin:auto; background-color:#F6F4F1; border: 5px solid #00b4b4; padding:0; border-radius: 25px; } #header { width:100%; top:0; } #header p { text-align:right; margin-right:3%; } #footer { width:100%; bottom:0; color:#838B8B; font-family:verdana; } #footer:after { content:""; clear: both; display: table; } .register_form { border-radius: 6px; border: 4px solid #C1CDCD; width:70%; } #register_form { margin-left:4%; border-right: 2px dotted #00CDCD; width:30%; margin-right:0%; display:inline-block; } #register_form h2 { color:#00CDCD; font-family:verdana; } #side_text { width:30%; float:right; margin-right:30%; } #side_text h3 { color:#00CDCD; font-family:verdana; } #side_text p { color:#838B8B; font-family:verdana; } #login_form { margin-left:4%; border-right: 2px dotted #00CDCD; width:30%; margin-right:0%; display:inline-block; } #login_form h2 { color:#00CDCD; font-family:verdana; } .login_form { border-radius: 6px; border: 4px solid #C1CDCD; width:70%; } #just_registered_text { text-align:center; color:#00CDCD; font-family:verdana; } #errors { float: left; margin-left:4.5%; text-align:left; color:red; } #other { float: right; text-align:right; margin-right:3%; display:inline-block; } #profile_name_div { margin-left:3%; color: #00b4b4; font-size: 27px; font-family:verdana; font-weight: 700; display:inline; } #change_settings a { margin-left:5%; color:lightblue; font-size: 16px; font-family:verdana; font-weight: 700; } #settings_space h2 { margin-left:3%; color:#00CDCD; font-size: 27px; font-family:verdana; font-weight: 700; } #settings_space textarea { overflow: hidden; resize: none; border: 2px solid #00CDCD; margin-left:3%; border-radius: 8px; } #settings_space:first-letter { text-transform: capitalize; } #settings_space label { margin-left:8%; color: #009acd; } .settings_submit { margin-left:5%; } .info { margin-left:3%; display:inline; color:#838B8B; font-family:verdana; width:100%; } #photo { display:block; border: 1px solid black; width:200px; height:200px; margin-left:3.5%; } #actual_photo { width:200px; height:200px; } #change_pp { background:#f9f9f9; border-bottom: 1px dashed #ccc; border-top: 1px dashed #ccc; border-left: 1px dashed #ccc; border-right: 1px dashed #ccc; width:200px; margin-left:3.5%; padding:0; } #proj { display: none; } #button { width:100%; } #change_pp input[type=file] { width:100%; } .info > b { color:#00CDCD; } #about_me_header { margin-left:3.5%; color:#B4CDCD; border: 5px solid #00b4b4; border-radius:20px; width:50%; } #about_section { border:2px solid red; width:30%; float: right; } #left_section { float: left; }<body> <div id='container'> <div id='header'> <p>The current date is $date:</p> </div> <span id="profile_name_div"> example </span> <span id="change_settings"> <a href='account_settings.php'>Change Settings </a> <br /> </span> <div id="left_section"> <div id="photo">example</div> <div id="change_pp"> <button id="button" onclick="showForm()">Change Profile Picture</button> <form id="proj" action="include/form_handle.php" method="POST" enctype="multipart/form-data"> <input type="file" value="change" name="pp_file" /> <input type="submit" name="pp_submit" value="Upload Photo" /> </form> </div> </div> <div id="about_section"> <h1 id="about_me_header">About me header</h1> <br/> <div class="info"><b>Bio: </b>text</div> <br/> <br/> <div class="info"><b>Interests: </b>text</div> <br/> <br/> <div class="info"><b>Favorite Quotes: </b>text</div> <div id='footer'></div> </div> <div style="clear: both;"></div> </body>JSFiddle Version: https://jsfiddle.net/8jczhzaL/3/
更多推荐
发布评论