根据图像的宽度自动调整 div 的各个部分的大小？
Posted
技术标签:
【中文标题】根据图像的宽度自动调整 div 的各个部分的大小？【英文标题】：Automatically resize parts of a div depending on the width of an image? 【发布时间】：2015-02-06 08:04:18 【问题描述】：我正在 Bootstrap 3 中开发一个包含一系列文本控件和图像的表单。表单占据其容器的 100%，文本输入也设置为 100% 宽度。当我不必担心图像时，这很有效。我使用引导程序 .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%。像这样：
我知道图像可以浮动，但我不希望其下方的所有输入与图像行上的输入具有相同的宽度。我希望他们扩大。
【问题讨论】：
将图像作为浮动右侧并添加一些填充。不要为此使用 inline-block。 我建议你提供一个小提琴 已添加！ jsbin.com/neqosoduqe/1/edit 这不是引导程序的工作方式。请记住，引导程序是移动优先的。您希望在较窄的屏幕上采用何种布局？您是否想要输入上方的图像，下方的图像，或者介于两者之间的图像？我并不是说它不能完成，但你会破坏你正在使用的框架的纹理，所以你必须仔细考虑它。 确实如此。在狭窄的屏幕上，图像将单独出现在一行中。该页面将首先构建为图像，然后以适合移动设备的方式构建表单的其余部分。此效果仅适用于桌面视图。 【参考方案1】：使用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>【讨论】：
【参考方案2】：我在您的代码中看到了多种格式列。这使得它的行为无法控制。
尝试仅使用一种格式，例如class="col-lg-6。
据我所知，bootstrap 100% 使用表单控制，我们可以通过选择合适的列类来修改它。
为了满足您的需要，您可以创建新的 CSS 文件。将它放在 下面 bootstrap.min.css。然后将图像浮动到右侧并设置最小宽度和最大宽度（以 % 为单位），使其根据浏览器的窗口自动调整大小。
此外，在图像属性中使用class='img-responsive' 使其自动调整大小。
【讨论】：
【参考方案3】：您是否尝试过将前 3 或 4 个输入和图像放在各自的行中？这将导致该行扩展到容器的宽度，并使您的图像保持在右侧。您还可以将class="img-responsive" 类添加到图像中，以便它随着屏幕缩小而缩小。
<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>
【讨论】：
【参考方案4】：您只需要在图像和表单中添加一些浮点数，如下所示：
(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
【讨论】：
嗯...有什么方法可以让它下面的那些像这样自动扩展？ i.imgur.com/4ufPJT3.png以上是关于根据图像的宽度自动调整 div 的各个部分的大小？的主要内容，如果未能解决你的问题，请参考以下文章