Html 如何在文本旁边获得图像？

我希望得到我的证书图像和文本的权利的形象。我希望无论窗户大小，它们都能挨在一起

<div class="ISO">
  <div class="container">
    <h2>Certification</h2>
    <section class="container">
      <div class="row">
        <figure class="col-sm-6">
          <img src="http://i.imgur.com/wQQP94Y.jpg">
        </figure>
        <figure class="col-sm-6">
          <p><u>GOVERNMENT SUB-CONTRACTOR INFORMATION</u>
            <br> CCR and ORCA Registered US Government Sub-Contractor
            <br> Company CAGE Code: 4STK5
            <br>
            <u>Business Certifications:</u>
            <br> Veteran Owned - Small Business
            <br> ISO 9001-2015 Certificate Number 16.127.1
            <br> Labor Surplus Region
            <br>
            <br>
            <u>NAICS Codes:</u>
            <br> 332710 – Machine Shops
            <br> 332721 – Precision Turned Product Manufacturing
            <br>
            <br>
            <u>Potential Federal Supply Classifications:</u>
            <br> 1005/1010 – Guns – 30mm – 75mm
            <br> 1650 – Aircraft Hydraulic, Vacuum and De-icing System Components
            <br> 1660 – Aircraft Air conditioning , heat and pressurizing equipment
            <br> 2590 – Miscellaneous vehicle components
            <br> 2910/2915 – Fuel System Components
            <br> 2930/ 2935 – Engine Cooling System Components
            <br> 4130 – Refrigeration and Air Conditioning components
            <br> 7320 – Kitchen Equipment and appliances (components)
            <br>
            <br>
          </p>
        </figure>
      </div>

证明
政府分包商资料

CCR和ORCA注册的美国政府分包商

公司代码：4STK5


商业证书：

退伍军人所有-小企业

ISO 9001-2015证书编号16.127.1

劳动力过剩地区




NAICS代码：

332710–机器车间

332721–精密车削产品制造




潜在联邦供应分类：

1005/1010–火炮–30毫米–75毫米

1650–飞机液压、真空和除冰系统组件

1660–飞机空调、加热和增压设备

2590–其他车辆部件

2910/2915–燃油系统部件

2930/2935–发动机冷却系统部件

4130–制冷和空调部件

7320–厨房设备和用具（部件）

---

您正在使用引导类，但代码中没有包含bootstrap.css。可以包括引导css，也可以添加自定义样式

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

.col-sm-6 {
    width: 50%;
    float: left;
}

img {
  width: 100%;
}

---

将以下样式添加到css中。

好吧，只需使用类

col-xs-6

而不是

col-sm-6

，并记住缩放那些巨大的图像

---

您的问题是，它们在非常小的屏幕上不相邻吗？ 给你的图像一个100%的宽度，并使用xs作为额外的小而不是sm。xs将覆盖所有屏幕尺寸。从最小的开始。还要确保引用页面上的引导库以使用引导类。另外，如果你想让所有屏幕尺寸的图片在左边，文本在右边，那就需要使用引导。你可以给你的图像50%的宽度，给你的文本元素50%的宽度在他们自己的div中。或者你可以让你的文本向右浮动。无论如何，这里是引导：

 <div class="row"><div class="col-xs-6"><img style="width:100%" src="http://i.imgur.com/wQQP94Y.jpg"></div><div class="col-xs-6"><p>random text on th right bla bla bla bla</p></div></div>

右侧bla bla bla bla上的随机文本

不要忘记包含引导库，因此它应该按照所使用的类的预期工作。否则请全部重写

您可以使用带%的垂直填充设置容器的比率

下面的示例对图像和比率使用bg。如果您使用伪值来调整容器的高度，它允许您设置最大高度

html，
身体{
保证金：0；
填充：0；
}
.集装箱{
最大宽度：100%；
保证金：0自动；
填充：0 10px；
}
/*启动重置比率和bg映像*/
琼伯伦先生{
背景：url(http://i.imgur.com/U0ZfxUe.jpg)无重复上止点；
背景尺寸：封面；
宽度：100%；
最大高度：800px；
溢出：隐藏；
}
琼伯伦：以前{
内容：''；
显示：内联块；
垫面：66.7%；
}
.imgsz{宽度：100%；高度：0；填充顶部：129%；
背景：url(http://i.imgur.com/wQQP94Y.jpg);
背景尺寸：封面；
}
/*结束演示比率*/
.标题{
背景色：#34495E；
}
.导航a{
颜色：#fff；
文字装饰：无；
}
.导航{
列表样式类型：无；
保证金：0；
填充：20px0；
}
李国荣先生{
颜色：#fff；
显示：内联；
字体系列：“Raleway”，无衬线；
字号：600；
字体大小：12px；
右边距：25px；
文本转换：大写；
}
梅因先生{
左：0px顶部：0px；
文本对齐：左对齐；
}
.main h1{
颜色：#2E86C1；
字体系列：“Raleway”，无衬线；
字号：600；
字体大小：70px；
边际上限：0；
边缘底部：80px；
}
.btn主站{
背景色：#333；
颜色：#fff；
字体系列：“Raleway”，无衬线；
字号：600；
字号：18px；
字母间距：1.3px；
填充：16px 40px；
文字装饰：无；
文本转换：大写；
}
.btn默认值{
边框：2倍双色#34495E；
颜色：#34495E；
字体系列：“Raleway”，无衬线；
字号：600；
字体大小：10px；
字母间距：1.3px；
填充：10px 20px；
文字装饰：无；
文本转换：大写；
显示：内联块；
边缘底部：20px；
}
.支持{
填充顶部：80px；
填充底部：100px；
}
.支持{
浮动：左；
宽度：33%；
字体系列：“Raleway”，无衬线；
文本对齐：居中；
颜色：#2E86C1
}
.支持img{
高度：32px；
}
.支持h2{
字号：600；
字体大小：23px；
文本转换：大写；
文本对齐：居中；
}
.支持p{
字体大小：400；
字体大小：14px；
线高：20px；
填充：0 50px；
边缘底部：40px；
}
上校{
显示：内联；
}
.clearfix{
明确：两者皆有；
}
.历史{
边框：2倍双色#34495E；
}
.历史h2{
宽度：100%；
字体系列：“Raleway”，无衬线；
文本对齐：居中；
颜色：#2E86C1
}
.p.历史{
颜色：#34495E；
字体系列：“Raleway”，无衬线；
字号：600；
字体大小：16px；
字母间距：1.3px；
填充：10px 20px；
显示：内联块；
}
.历史ul{
保证金：0；
左侧填充：30px；
}
李国宝先生{
边际：0px；
填充：0px；
文本缩进：0em；
左边距：1米；
}
李先生{
颜色：#34495E；
字体系列：“Raleway”，无衬线；
}
.关于{
边框：2倍双色#34495E；
}
.关于h2{
宽度：100%；
字体系列：“Raleway”，无衬线；
文本对齐：居中；
颜色：#2E86C1
}
.关于p{
颜色：#34495E；
字体系列：“Raleway”，无衬线；
字号：600；
字体大小：16px；
字母间距：1.3px；
填充：10px 20px；
显示：内联块；
}
.联系h2{
宽度：100%；
字体系列：“Raleway”，无衬线；
文本对齐：居中；
颜色：#2E86C1；
}
康塔克先生