我正在 Bootstrap 3 中开发一个表单，它包含一系列文本控件和一个图像。表单占据其容器的 100%，文本输入也设置为 100% 宽度。当我不必担心图像时，这很有效。我使用 Bootstrap .form-control 和 .form-horizontal 类使其工作(代码在底部):
当前外观
我需要将图像放在这些表单控件的右侧，并适当减小它们的宽度:
模型
我会简单地在 Bootstrap 的网格系统中放入另一列来处理这个问题，但我也希望这些列在图像完成后恢复到全宽，如上面的模型图像所示。类似于 Microsoft Word 中的“紧密”图像布局。我已经尝试将 float:right; 和 display:inline-block' 设置为图像类，但结果不正确:
还没有工作
有人知道如何使设计像我在模型中描述的那样工作吗？
<!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>我想要的具体效果是让图像下方的输入再次扩展到 100%。像这样:
我知道图像可以 float ，但我不希望它下面的所有输入都与图像线上的输入宽度相同。我希望它们扩展。
最佳答案
你只需要在图像和表单中添加一些 float ，如下所示:
( 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 }
关于html - 根据图像的宽度自动调整部分 div 的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27361853/