Làm thế nào để ngăn chặn văn bản được thay đổi kích cỡ của nó có chứa div

Tôi đã chơi với bố trí đáp ứng và các hình thức. Tôi khá hài lòng với những gì tôi có cho đến nay: nó hoạt động độc đáo từ điện thoại di động đến màn hình rộng; xem bên dưới. (Chỉ được thử nghiệm trên firefox/chrome cho đến nay.)Làm thế nào để ngăn chặn văn bản được thay đổi kích cỡ của nó có chứa div

Với chiều rộng 800px, nó di chuyển khối thông báo sang cột bên phải. Vấn đề là điều này được thực hiện với một float: right và position: absolute, có nghĩa là chiều cao của nó dừng lại ảnh hưởng đến div xung quanh. Vì vậy, các hộp tin nhắn gậy ra.

Tôi có thể (và thực hiện) cải thiện điều này bằng cách thêm chiều cao: 220px, sao cho có vẻ ổn định theo mặc định. Nhưng ai đó vẫn có thể thay đổi kích thước vùng văn bản bên ngoài div xung quanh. Tôi tìm thấy thay đổi kích thước textareas một tính năng tuyệt vời, vì vậy không muốn không cho phép thay đổi kích thước. Và tràn: tự động không phải là một giải pháp: người dùng sẽ chỉ trao đổi thanh cuộn trên vùng văn bản cho thanh cuộn trên div!

Vì vậy, có cách nào để thay đổi kích thước div bên ngoài để luôn chứa văn bản không?

<html> 
<head> 
<style> 
body{background:#fff;font-family:FreeSerif, serif;font-size:16px;margin: 0 0 0 0;} 

#contactform {margin: 0 auto;width:90%;max-width:320px;border:1px #000 solid;border-radius:8px;padding:6px;} 
#contactform .required:after{color:red;content:" *";} 
#contactform label {display:block;} 
#contactform textarea {height:120px;rows:5;min-width:90%;max-width:90%;} 
#contactform input,textarea {border: 1px solid red;border-radius:8px;width:90%;height:26px;padding:2px 4px;font-family:sans;} 

@media (min-width: 800px) { 
#contactform {margin: 0 auto;width:640px;max-width:640px;position:relative;/*height:220px;*/} 
#formsecondhalf {top:0;right:6px;position:absolute;} 
#contactform textarea {height:200px;rows:8;min-height:200px;min-width:300px;max-width:300px;} 
#contactform input,textarea {width: 300px;min-width:300px;max-width:300px;} 
} 

</style> 
</head> 
<body> 
<div id="contactform"> 
<form action="" method="post"> 
<label for="name" class="required">Name:</label> 
<input id="name"> 
<br/> 
<label for="email" class="required">Email:</label> 
<input id="email"> 
<br/> 
<div id="formsecondhalf"> 
<label for="message">Message:</label> 
<textarea id="message"></textarea> 
</div> 
<br /> 
<input type="submit" value="SEND"> 
</form> 
</div> 
</body> 
</html>

Nguồn

2012-07-05 Darren Cook

thú vị. Nếu không ai trả lời trước, tôi sẽ có một cái nhìn tối nay. – baptme

Sử dụng phao: phải thay vì hoàn toàn định vị đúng khu vực. Và sau đó quấn một div xung quanh các lĩnh vực khác, trôi nổi mà còn lại, và sau đó chỉ cần xóa tất cả.

Ví dụ

<html> 
    <head> 
     <style> 
      body{background:#fff;font-family:FreeSerif, serif;font-size:16px;margin: 0 0 0 0;} 

      #contactform {margin: 0 auto;overflow:auto;width:90%;max-width:320px;border:1px #000 solid;border-radius:8px;padding:6px;} 
      #contactform .required:after{color:red;content:" *";} 
      #contactform label {display:block;} 
      #contactform textarea {height:120px;rows:5;min-width:90%;max-width:90%;} 
      #contactform input,textarea {border: 1px solid red;border-radius:8px;width:90%;height:26px;padding:2px 4px;font-family:sans;} 

      @media (min-width: 800px) { 
       #contactform {margin: 0 auto;width:640px;max-width:640px;position:relative;/*height:220px;*/} 
       #formsecondhalf {float:right;} 
       #formfirsthalf {float:left;} 
       #contactform textarea {height:200px;rows:8;min-height:200px;min-width:300px;max-width:300px;} 
       #contactform input,textarea {width: 300px;min-width:300px;max-width:300px;} 
      } 

     </style> 
    </head> 
    <body> 
     <div id="contactform"> 
      <div id="formfirsthalf"> 
       <form action="" method="post"> 
        <label for="name" class="required">Name:</label> 
        <input id="name"> 
        <br/> 
        <label for="email" class="required">Email:</label> 
        <input id="email"> 
        <br/> 
      </div> 
      <div id="formsecondhalf"> 
       <label for="message">Message:</label> 
       <textarea id="message"></textarea> 
      </div> 
      <br /> 
      <input type="submit" value="SEND"> 
       </form> 
     </div> 
    </body> 
</html>

Nguồn

2012-07-05 14:52:01 zen

cũng được thực hiện, đó là những gì tôi đã suy nghĩ. +1 – baptme

Cảm ơn. Nó hoạt động hoàn hảo! –

Làm thế nào để ngăn chặn văn bản được thay đổi kích cỡ của nó có chứa div

Trả lời

Các vấn đề liên quan