如何在文本旁边显示图像？

时间：2017-06-01 20:29:53

标签： html css

我希望获得我的证书图片和图片右侧的文字。无论窗口大小如何，我希望它们彼此相邻。

<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>

https://jsfiddle.net/dhalldow/ggzf8acf/

6 个答案:

答案 0 :(得分：0)

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

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

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

img {
  width: 100%;
}

将以下样式添加到您的CSS中。

答案 1 :(得分：0)

只需使用课程col-xs-6代替col-sm-6并记住缩放这些巨幅图片

https://jsfiddle.net/L077a7nd/

答案 2 :(得分：0)

你的问题是他们不是在非常小的屏幕尺寸上彼此相邻吗？ 给你的图像宽度为100％，并使用xs为额外的小而不是sm。 xs将涵盖所有屏幕尺寸。从最小的开始。还要确保引用页面上的引导库以使用引导类。 P.S - 如果你想让它成为左边的图像，而右边的文字是所有屏幕尺寸的，那么就需要使用bootstrap。你可以给你的图像宽度为50％，你的文字在他们自己的div中的宽度为50％。或者你可以让你的文字正确浮动。无论如何这里是bootstrap：

 <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>

答案 3 :(得分：0)

不要忘记包含bootstrap库，因此它应该从所使用的类中按预期工作。否则重写它...

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

下面的示例使用bg作为图像和比率。如果你使用伪大小容器的高度，它允许你设置最大高度。

＆＃13;
＆＃13; 
html,
body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}
/* start reset ratio and bg image */
.jumbotron {
  background: url(http://i.imgur.com/U0ZfxUe.jpg) no-repeat top center;
  background-size: cover;
  width: 100%;
  max-height:800px;
  overflow:hidden;
}
.jumbotron:before {
  content:'';
  display:inline-block;
  padding-top:66.7%;
}

.imgsz {width:100%;height:0;padding-top:129%;
  background:url(http://i.imgur.com/wQQP94Y.jpg);
  background-size:cover;
}
/* end demo ratio */

.header {
  background-color: #34495E;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

.nav {
  list-style-type: none;
  margin: 0;
  padding: 20px 0;
}

.nav li {
  color: #fff;
  display: inline;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  margin-right: 25px;
  text-transform: uppercase;
}

.main {
  left: 0px top: 0px;
  text-align: left;
}

.main h1 {
  color: #2E86C1;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 70px;
  margin-top: 0;
  margin-bottom: 80px;
}

.btn-main {
  background-color: #333;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 40px;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-default {
  border: 2px double #34495E;
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
}

.supporting {
  padding-top: 80px;
  padding-bottom: 100px;
}

.supporting .col {
  float: left;
  width: 33%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.supporting img {
  height: 32px;
}

.supporting h2 {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
  text-align: center;
}

.supporting p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 50px;
  margin-bottom: 40px;
}

.col {
  display: inline;
}

.clearfix {
  clear: both;
}

.history {
  border: 2px double #34495E;
}

.history h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.history p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  display: inline-block;
}

.history ul {
  margin: 0;
  padding-left: 30px;
}

.history ul li {
  margin: 0px;
  padding: 0px;
  text-indent: 0em;
  margin-left: 1em;
}

.history li {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
}

.About {
  border: 2px double #34495E;
}

.About h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.About p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  display: inline-block;
}

.Contact h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1;
}

.Contact p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  float: left;
  text-align: center;
}

.ISO h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1;
}

.ISO p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  float: right;
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
}

.footer p {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="header">
      <div class="container">
        <ul class="nav">
          <li><a href="tl.html">Home</a></li>
          <li><a href="About.html">About</a></li>
          <li><a href="Team.html">Team</a></li>
          <li><a href="Contact.html">Contact</a></li>
        </ul>
      </div>
    </div>
    <div class="jumbotron">
      <div class="container">
        <div class="main">

        </div>
      </div>
    </div>

    <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"  class="imgsz"/>
              
            </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>
＆＃13;
＆＃13;
＆＃13;

您自己的示例使用bootstrap + max-width修复img：

加载bootstrap：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

将max-width修复为certificat 

.row figure.col-sm-6 > img {
    max-width:100%;
}

要在下面运行和测试的代码段

＆＃13;
＆＃13; 
.row figure.col-sm-6>img {
  max-width: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.jumbotron {
  background: url(http://i.imgur.com/U0ZfxUe.jpg) no-repeat center center;
  background-size: 100% 100%;
  height: 800px;
  max-width: 100%;
}

.header {
  background-color: #34495E;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

.nav {
  list-style-type: none;
  margin: 0;
  padding: 20px 0;
}

.nav li {
  color: #fff;
  display: inline;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  margin-right: 25px;
  text-transform: uppercase;
}

.main {
  left: 0px top: 0px;
  text-align: left;
}

.main h1 {
  color: #2E86C1;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 70px;
  margin-top: 0;
  margin-bottom: 80px;
}

.btn-main {
  background-color: #333;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 40px;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-default {
  border: 2px double #34495E;
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
}

.supporting {
  padding-top: 80px;
  padding-bottom: 100px;
}

.supporting .col {
  float: left;
  width: 33%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.supporting img {
  height: 32px;
}

.supporting h2 {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
  text-align: center;
}

.supporting p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 50px;
  margin-bottom: 40px;
}

.col {
  display: inline;
}

.clearfix {
  clear: both;
}

.history {
  border: 2px double #34495E;
}

.history h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.history p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  display: inline-block;
}

.history ul {
  margin: 0;
  padding-left: 30px;
}

.history ul li {
  margin: 0px;
  padding: 0px;
  text-indent: 0em;
  margin-left: 1em;
}

.history li {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
}

.About {
  border: 2px double #34495E;
}

.About h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.About p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  display: inline-block;
}

.Contact h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1;
}

.Contact p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  float: left;
  text-align: center;
}

.ISO h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1;
}

.ISO p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  float: right;
}
.footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
}

.footer p {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />


<div class="header">
  <div class="container">
    <ul class="nav">
      <li><a href="tl.html">Home</a></li>
      <li><a href="About.html">About</a></li>
      <li><a href="Team.html">Team</a></li>
      <li><a href="Contact.html">Contact</a></li>
    </ul>
  </div>
</div>
<div class="jumbotron">
  <div class="container">
    <div class="main">

    </div>
  </div>
</div>

<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" class="imgsz" />

        </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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

检查您的Bootstrap是否已正确添加。 之后，将img-responsive类添加到img标签中，它将解决您的问题。

＆＃13;
＆＃13; 
html,
body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.jumbotron {
  background: url(http://i.imgur.com/U0ZfxUe.jpg) no-repeat center center;
  background-size: 100% 100%;
  height: 800px;
  max-width: 100%;
}

.header {
  background-color: #34495E;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

.nav {
  list-style-type: none;
  margin: 0;
  padding: 20px 0;
}

.nav li {
  color: #fff;
  display: inline;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  margin-right: 25px;
  text-transform: uppercase;
}

.main {
  left: 0px top: 0px;
  text-align: left;
}

.main h1 {
  color: #2E86C1;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 70px;
  margin-top: 0;
  margin-bottom: 80px;
}

.btn-main {
  background-color: #333;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 40px;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-default {
  border: 2px double #34495E;
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 20px;
}

.supporting {
  padding-top: 80px;
  padding-bottom: 100px;
}

.supporting .col {
  float: left;
  width: 33%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.supporting img {
  height: 32px;
}

.supporting h2 {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
  text-align: center;
}

.supporting p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 50px;
  margin-bottom: 40px;
}

.col {
  display: inline;
}

.clearfix {
  clear: both;
}

.history {
  border: 2px double #34495E;
}

.history h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.history p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  display: inline-block;
}

.history ul {
  margin: 0;
  padding-left: 30px;
}

.history ul li {
  margin: 0px;
  padding: 0px;
  text-indent: 0em;
  margin-left: 1em;
}

.history li {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
}

.About {
  border: 2px double #34495E;
}

.About h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1
}

.About p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  display: inline-block;
}

.Contact h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1;
}

.Contact p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  float: left;
  text-align: center;
}

.ISO h2 {
  width: 100%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #2E86C1;
}

.ISO p {
  color: #34495E;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  float: right;
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
}

.footer p {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
}
＆＃13; 
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="header">
      <div class="container">
        <ul class="nav">
          <li>
            <a href="tl.html">Home</a>
          </li>
          <li>
            <a href="About.html">About</a>
          </li>
          <li>
            <a href="Team.html">Team</a>
          </li>
          <li>
            <a href="Contact.html">Contact</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="jumbotron">
      <div class="container">
        <div class="main"></div>
      </div>
    </div>
    <div class="ISO">
      <div class="container">
        <h2 class="hero">Certification</h2>
        <section class="container">
          <div class="row">
            <div class="col-xs-6">
              <img class="img-responsive" src="http://i.imgur.com/wQQP94Y.jpg" />
            </div>
            <div class="col-xs-6">
              <p>
                <u class="warning">GOVERNMENT SUB-CONTRACTOR INFORMATION</u>
                <br />






 CR 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>
            </div>
          </div>
        </section>
      </div>
    </div>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：-1)

您是否尝试将类img-fluid用于bootstrap v4或img-responsive for bootstrap v4？

如果您没有设置尺寸，您的图像就无法适合您的色彩。使用img-responsive bootstrap为您执行此操作并且所有组件都可以放在一排......

希望得到帮助

相关问题
最新问题