html - What you need to change so that the input fields are to the right of the picture? -
please, me, need change input fields right of picture?
https://codepen.io/anon/pen/gmgjqy
.div1{ font-size:250%; text_align: center; } .pedit_labeled{ float: left; line-height: 16px; } .pedit_label{ color: #656565; width: 170px; padding: 6px 10px 0 0; line-height: 16px; float: left; text-align: right; } .clear_fix { display: block; } .clear_fix:after { content: '.'; display: block; height: 0; font-size: 0; line-height: 0; clear: both; visibility: hidden; } .pedit_row { padding-bottom: 15px; } input.dark, #profile_editor textarea, .pedit_dropdown { width: 300px; } pedit_bday, .pedit_bmonth { padding-right: 8px; } .fl_l { float: left; } .selector_container { background: #fff; zoom: 1; }
<div class="div1">contact's profile</div> <div> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gctvihkpz1ybw0mmpoif0jublfmguh308cddnjcnsrswwlisfx7a" class="img-circle" align: "left"> <div class="pedit_row clear_fix"> <div class="pedit_label">name:</div> <div class="pedit_labeled"> <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" /> </div> </div> <div class="pedit_row clear_fix"> <div class="pedit_label">sex:</div> <div class="pedit_labeled"> <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" /> </div> </div> <div class="pedit_row clear_fix"> <div class="pedit_label">nationality:</div> <div class="pedit_labeled"> <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" /> </div> </div> <div class="pedit_row clear_fix"> <div class="pedit_label">family status:</div> <div class="pedit_labeled"> <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" /> </div> </div> <div class="pedit_row clear_fix"> <div class="pedit_label">web site:</div> <div class="pedit_labeled"> <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" /> </div> </div> </div>
you can using float
, set width
both divs
.div1 { font-size: 250%; text-align: center; } .pedit_labeled { float: left; line-height: 16px; width: 60%; box-sizing: border-box; } .pedit_label { color: #656565; width: 35%; padding: 6px 10px 0 0; line-height: 16px; float: left; text-align: right; box-sizing: border-box; } .clear_fix { display: block; } .clear_fix:after { content: '.'; display: block; height: 0; font-size: 0; line-height: 0; clear: both; visibility: hidden; } .img-block { float: left; width: 45%; padding-right: 5%; } .img-block img { width: 100%; } .input-block { float: left; width: 50%; } .pedit_row { padding-bottom: 15px; } input.dark, #profile_editor textarea, .pedit_dropdown { width: 100%; } pedit_bday, .pedit_bmonth { padding-right: 8px; } .fl_l { float: left; } .selector_container { background: #fff; zoom: 1; }
<div class="div1">contact's profile</div> <div> <div class="img-block"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gctvihkpz1ybw0mmpoif0jublfmguh308cddnjcnsrswwlisfx7a" class="img-circle"> </div> <div class="input-block"> <div class="pedit_row clear_fix"> <div class="pedit_label">name:</div> <div class="pedit_labeled"> <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" /> </div> </div> <div class="pedit_row clear_fix"> <div class="pedit_label">sex:</div> <div class="pedit_labeled"> <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" /> </div> </div> <div class="pedit_row clear_fix"> <div class="pedit_label">nationality:</div> <div class="pedit_labeled"> <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" /> </div> </div> <div class="pedit_row clear_fix"> <div class="pedit_label">family status:</div> <div class="pedit_labeled"> <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" /> </div> </div> <div class="pedit_row clear_fix"> <div class="pedit_label">web site:</div> <div class="pedit_labeled"> <input type="text" value="Антон" id="pedit_first_name" class="dark" autocomplete="off" /> </div> </div> </div> </div>
Comments
Post a Comment