根据图像的宽度自动调整div的部分大小？
Zac*_*all 5 html css twitter-bootstrap
我正在开发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%.像这样:
我知道图像可以浮动,但我不希望它下面的所有输入与图像线上的输入宽度相同.我希望他们扩大.
您只需向图像和表单添加一些浮动，如下所示：
（小提琴）
超文本标记语言
<img class="img-right">
<form class="form-horizontal">
</form>
CSS
.img-right {
float: right;
max-width: 200px;
padding-left: 20px }
.form-horizontal {
float: right }