我试图将我的文字放在图像的右边，但我试图将它漂浮在右边，我甚至试图把它放在一个弹性箱中，但似乎没有任何东西可以很好地运行。这是我的代码..
<div class="tab-content">
<div class="tab-pane active" id="tab_default_1">
<h2 class="text-dark-green">Kur Gin</h2>
<p>
<img class="img-responsive" style="height: 40em; width:30em; margin-top:25px; box-shadow: 10px 10px 5px #888888;" src="app/what-we-make/images/KurGin.jpg" alt="" />
</p>
<p>
Our gin, Kur (pronounced "cure") is made in the London Dry Gin style and is produced with Washington heirloom variety red winter wheat that emphasizes a backbone of classic juniper aromas and flavors with subtle citrus (Seville orange) as well as Douglas Fir and Braeburn apples from Mr. Liedholm's back yard.
</p>
</div>
<div class="tab-pane" id="tab_default_2">
<h2 class="text-dark-green">Stark Vatten</h2>
<p>
<img class="img-responsive" style="height:40em; width:30em; margin-top:25px; box-shadow: 10px 10px 5px #888888;" src="app/what-we-make/images/StarkVatten.jpg" alt="" />
</p>
<p>
Our vodka, Stark Vatten (Swedish for “strong water”), is produced with Washington heirloom variety red winter wheat and pure, filtered water to create a clean, viscous, oily vodka that displays a definitive classic European style while remaining a distinctive local product.
</p>
</div>
<div class="tab-pane" id="tab_default_3">
<h2 class="text-dark-green">White Dog Bourbon</h2>
<p>
<img class="img-responsive" style="height:40em; width:30em; margin-top:25px; box-shadow: 10px 10px 5px #888888;" src="app/what-we-make/images/bourbon.jpg" alt="" />
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
</p>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
使用包裹图片的.pull-left上的p课程，以及父母的.clearfix来清除花车。然后，您将要对文本应用边距和填充，以使其与图像对齐。
忽略此处的.tab-pane css - 仅用于演示，因此隐藏的窗格会显示。
/* ignore this - just for demo */
.tab-pane {
display: block!important;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-content">
<div class="tab-pane active clearfix" id="tab_default_1">
<h2 class="text-dark-green">Kur Gin</h2>
<p class="pull-left">
<img class="img-responsive" style="height: 40em; width:30em; margin-top:25px; box-shadow: 10px 10px 5px #888888;" src="app/what-we-make/images/KurGin.jpg" alt="" />
</p>
<p>
Our gin, Kur (pronounced "cure") is made in the London Dry Gin style and is produced with Washington heirloom variety red winter wheat that emphasizes a backbone of classic juniper aromas and flavors with subtle citrus (Seville orange) as well as Douglas
Fir and Braeburn apples from Mr. Liedholm's back yard.
</p>
</div>
<div class="tab-pane clearfix" id="tab_default_2">
<h2 class="text-dark-green">Stark Vatten</h2>
<p class="pull-left">
<img class="img-responsive" style="height:40em; width:30em; margin-top:25px; box-shadow: 10px 10px 5px #888888;" src="app/what-we-make/images/StarkVatten.jpg" alt="" />
</p>
<p>
Our vodka, Stark Vatten (Swedish for “strong water”), is produced with Washington heirloom variety red winter wheat and pure, filtered water to create a clean, viscous, oily vodka that displays a definitive classic European style while remaining a distinctive
local product.
</p>
</div>
<div class="tab-pane clearfix" id="tab_default_3">
<h2 class="text-dark-green">White Dog Bourbon</h2>
<p class="pull-left">
<img class="img-responsive" style="height:40em; width:30em; margin-top:25px; box-shadow: 10px 10px 5px #888888;" src="app/what-we-make/images/bourbon.jpg" alt="" />
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat
</p>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
您可以使用图像包装器和p文本，使该包装器成为具有align-items: center;的弹性容器（如果您希望它垂直居中于图像）并提供p以下设置。
.wrap {
display: flex;
align-items: center;
}
.wrap p {
flex: 1 0 100px;
padding-left: 20px;
}<div class="tab-content">
<div class="tab-pane active" id="tab_default_1">
<h2 class="text-dark-green">Kur Gin</h2>
<div class="wrap">
<img class="img-responsive" style="height: 40em; width:30em; margin-top:25px; box-shadow: 10px 10px 5px #888888;" src="http://placehold.it/200x600/fa0" alt="" />
<p>Our gin, Kur (pronounced "cure") is made in the London Dry Gin style and is produced with Washington heirloom variety red winter wheat that emphasizes a backbone of classic juniper aromas and flavors with subtle citrus (Seville orange) as well as Douglas Fir and Braeburn apples from Mr. Liedholm's back yard.</p>
</div>
<div class="tab-pane" id="tab_default_2">
<h2 class="text-dark-green">Stark Vatten</h2>
<div class="wrap">
<img class="img-responsive" style="height:40em; width:30em; margin-top:25px; box-shadow: 10px 10px 5px #888888;" src="http://placehold.it/200x600/fa0" alt="" />
<p>
Our vodka, Stark Vatten (Swedish for “strong water”), is produced with Washington heirloom variety red winter wheat and pure, filtered water to create a clean, viscous, oily vodka that displays a definitive classic European style while remaining a distinctive local product.</p>
</div>
</div>
</div>
<div class="tab-pane" id="tab_default_3">
<h2 class="text-dark-green">White Dog Bourbon</h2>
<div class="wrap">
<p>
<img class="img-responsive" style="height:40em; width:30em; margin-top:25px; box-shadow: 10px 10px 5px #888888;" src="http://placehold.it/200x600/fa0" alt="" />
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
</p>
</div>
</div>
</div>
</div>
答案 2 :(得分：0)
您可以使用
在不使用表的情况下获取图像右侧的文本“浮动：左”在图像的内嵌样式中。