1. ホーム
  2. 質問と答え
  3. 入力フィールドが画像の右側になるように変更する必要はありますか？

入力フィールドが画像の右側になるように変更する必要はありますか？

2017-09-14 11 views
-2

お手数ですが、入力フィールドが画像の右側になるように変更する必要がありますか？入力フィールドが画像の右側になるように変更する必要はありますか？

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>

出典

2017-09-14 user220297

+0

なぜあなたはそれを望みますか？ – ifconfig

答えて

0

あなたはfloatを使用してこの操作を行うと、あなたが入力を行うこととCSSの下2つのHTMLの変更を必要とする両方のdiv

.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>

出典

2017-09-14 05:06:42

0

のdiv内のフォームをラップし、それfloat:right作成し、画像float:left;を作ります。フレックスボックスを使うこともできますが、古いブラウザはサポートしていません。

.div1{ 
 
    font-size:250%; 
 
    text-align: center; 
 
} 
 
.imgdiv{ 
 
margin:0; 
 
padding:0; 
 
width:50%; 
 
float:left; 
 
} 
 
img{ 
 
display:block; 
 
margin:0 auto; 
 
margin-right:0; 
 
padding:0; 
 
width:100%; 
 
max-width:400px; 
 
} 
 
.formdiv{ 
 
margin:0; 
 
padding:0; 
 
width:50%; 
 
float:right; 
 
} 
 
.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> 
 
    <div class="imgdiv"> 
 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvIhkpz1YbW0mMpoIf0juBLFMgUH308cdDNJcnsrswwlIsFx7A" class="img-circle" align: "left"> 
 
    </div> 
 
    <div class="formdiv"> 
 
    <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>

出典

2017-09-14 05:02:11 ab29007

+0

大きな画像はありません。画像のサイズが同じで、唯一のフィールドが近くの画像になります（これは大きな画像で同じ方法です） – user220297

+0

私は答えを編集しました。それが役に立ったらそれを受け入れてください。 – ab29007

0

ためwidthを設定することができます画像右側のフィールド：

1. single container for img and input fields, I see you have a div 
above img, this can work, I applied class div2. 
2. You need one container for all the input fields, I added another div 
below image and wrapped all input fields in this class is "form".

そしてCSSであなただけの下の必要があります。

.div2 { 
display: flex; 
}

here is my fiddle link、あなたはより多くの助けが必要な場合はちょうど私がフロートなどのような多くの方法がある知っているが、それは

最高だと私はフレックス使用

出典

2017-09-14 06:14:02

0

単純で、すべてのブラウザでサポートされている:)

使用トン私はそれほどうまくはないが使いやすいことを知っています。あなたは柔軟なレイアウトをしたい場合はfloatに行くかtable-layout:fixed

<div class="div1">Contact's Profile</div> 
<table> 
    <tr> 
    <td><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvIhkpz1YbW0mMpoIf0juBLFMgUH308cdDNJcnsrswwlIsFx7A" class="img-circle" align: "left"></td> 
    <td> 
     <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> 
    </td> 
    </tr> 
</table> 
</div>

を設定し、それがお役に立てば幸いです。

出典

2017-09-14 06:18:27

 関連する問題

  • 関連する問題はありません^_^