Passen Sie Teile eines Div automatisch an, abhängig von der Breite eines Bildes?

Ich entwickle ein Formular in Bootstrap 3, das eine Reihe von Textsteuerelementen und ein Bild haben soll. Das Formular nimmt 100% seines Containers ein und die Texteingaben werden ebenfalls auf 100% Breite gesetzt. Das funktioniert gut, wenn ich mich nicht um ein Bild kümmern muss. Ich benutze den Bootstrap .form-control und .form-horizontal Klassen, um es (unten Code) funktioniert:Passen Sie Teile eines Div automatisch an, abhängig von der Breite eines Bildes?

Aktuelle Blick

I use the bootstrap .form-control and .form-horizontal

ich das Bild auf der rechten Seite dieser Form Kontrollen setzen müssen und entsprechend verringern ihre Breite:

Mockup

Mockup of what I'm talking about

Ich würde einfach in eine andere Spalte in Bootstrap Grid-System, um dies zu behandeln, aber ich würde auch gerne die Spalten wieder auf die volle Breite gehen, wenn das Bild fertig ist, wie in der Mock-up Bild oben gezeigt. Ähnliches wie das "enge" Bildlayout in Microsoft Word. Ich habe versucht, float:right; und display:inline-block' auf die Bildklasse Einstellung aber nicht entpuppt richtig:

Noch nicht Arbeiten

What I have right now.

Wer weiß, wie die Gestaltung der Arbeit zu machen, wie, wie ich Beschrieben es im Modell?

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="//code.jquery.com/jquery.min.js"></script> 
 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <h2>New Guest</h2> 
 

 
    <form class="form-horizontal" role="form"> 
 
     <img src="http://images.all-free-download.com/images/graphiclarge/man_silhouette_clip_art_9510.jpg" style="float: right; max-width: 200px; display: inline-block;" /> 
 

 
     <div class="form-group" id="group-tbFirstName"> 
 
     <label for="tbFirstName" class="col-sm-3 control-label">First Name</label> 
 

 
     <div class="col-sm-9"> 
 
      <input type="text" class="form-control" id="tbFirstName" placeholder="First Name" value="" /> 
 
     </div> 
 
     </div> 
 

 
     <div class="form-group" id="group-tbLastName"> 
 
     <label for="tbLastName" class="col-sm-3 control-label">Last Name</label> 
 

 
     <div class="col-sm-9"> 
 
      <input type="text" class="form-control" id="tbLastName" placeholder="Last Name" value="" /> 
 
     </div> 
 
     </div> 
 

 
     <div class="form-group" id="group-optGender"> 
 
     <label for="optGender" class="col-sm-3 control-label">Gender</label> 
 

 
     <div class="col-sm-9"> 
 
      <input type="text" class="form-control" id="optGender" placeholder="Gender" value="" /> 
 
     </div> 
 
     </div> 
 

 
     <div class="form-group" id="group-tbAge"> 
 
     <label for="tbAge" class="col-sm-3 control-label">Age</label> 
 

 
     <div class="col-sm-9"> 
 
      <input type="number" class="form-control" step="any" id="tbAge" value="" placeholder="Age" /> 
 
     </div> 
 
     </div> 
 

 
     <div class="form-group" id="group-dtDateOfBirth"> 
 
     <label for="dtDateOfBirth" class="col-sm-3 control-label">Date of Birth</label> 
 

 
     <div class="col-sm-9"> 
 
      <input type="text" class="form-control" id="dtDateOfBirth" placeholder="Date of Birth" value="" /> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

Der spezifische Effekt, den ich für gehe ist die Eingaben unter dem Bild zu haben, wieder auf 100% erweitern wird. Wie folgt aus:

not sure if it's possible

Ich weiß, dass das Bild schwebt werden kann, aber ich will nicht alle Eingänge darunter mit der gleichen Breite wie die, die auf den Linien mit dem Bild. Ich möchte, dass sie sich ausdehnen.

Quelle

2014-12-08 Zach Hall

das Bild als float rechts setzen und einige padding, um es hinzuzufügen. Verwenden Sie keinen Inline-Block dafür. – frenchie

Ich schlage vor, Sie bieten eine Geige –

Hinzugefügt! http://jsbin.com/neqosoduqe/1/edit –

Sie brauchen nur ein paar Schwimmer auf dem Bild hinzuzufügen und auch auf die Form, wie in der folgenden:

(FIDDLE)

HTML

<img class="img-right"> 
<form class="form-horizontal"> 
</form>

CSS

.img-right { 
    float: right; 
    max-width: 200px; 
    padding-left: 20px } 

.form-horizontal { 
    float: right }

Quelle

2014-12-08 16:16:26 Alex

Hm ... Irgendeine Möglichkeit, die darunter liegenden automatisch so zu erweitern? http://i.imgur.com/4ufPJT3.png –

Haben Sie versucht, die ersten 3 oder 4 Eingänge und das Bild in ihre eigenen zu setzen Reihe? Dadurch wird die Zeile auf die Breite des Containers erweitert und Ihr Bild wird auf der rechten Seite angezeigt. Sie können dem Bild auch die Klasse class="img-responsive" hinzufügen, so dass es verkleinert wird, wenn der Bildschirm verkleinert wird.

<div class="row"> 
    <div class="col-sm-8"> 

     //inputs go here 

    </div> 
    <div class="col-sm-4"> 

    //image goes here 

    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-12> 

    //the rest of your inputs here 

    </div> 
</div>

Quelle

2014-12-13 17:29:10 Trucktech

Ich sehe viele Arten von Format Spalte in Ihrem Code. Dies führt dazu, dass es sich unkontrollierbar verhält. Versuchen Sie, nur ein Format zu verwenden, z. B. class="col-lg-6. Solange ich weiß, Bootstrap 100% für Formularsteuerung verwenden, können wir es ändern, indem Sie die geeignete Klasse von Spalten auswählen.

Um Ihre Anforderung zu bearbeiten, können Sie neue CSS-Datei erstellen. Platziere es unter die bootstrap.min.css. Dann schweben Sie das Bild nach rechts und stellen Sie die minimale und maximale Breite in% ein, um die Größe automatisch basierend auf den Fenstern des Browsers anzupassen.

Verwenden Sie außerdem class='img-responsive' innerhalb des Bildes attr, um es automatisch in der Größe anzupassen.

Quelle

2014-12-16 15:07:37

Verwenden float propertyfloat: right;

.img-right { 
 
    float: right; 
 
    max-width: 200px; 
 
    padding-left: 20px; 
 
} 
 

 
.form-horizontal { 
 
    float: right; 
 
}

<img class="img-right"> 
 
<form class="form-horizontal"> 
 
</form>

Quelle

2017-09-14 11:02:32

Passen Sie Teile eines Div automatisch an, abhängig von der Breite eines Bildes?

Antwort

Verwandte Themen