如何通过标题文本获得图片

时间：2017-12-12 12:25:47

标签： html css html5 twitter-bootstrap css3

我有一些文字，我想在它的左边显示一张小图片，然后在文本的右侧显示，但我不确定如何做到这一点并使其响应，以便它当屏幕变小时，所有这些都会缩小。

我正在使用bootstrap 3，到目前为止我已经：

HTML：

    #restaurant-menu img {
        width: 100px;
        display:inline-block;
        vertical-align:top;
    }
    
    .border {
        display: block;
        height: 2px;
        margin-top: 30px;
        margin-bottom: 30px;
        width: 78px;
        background: #F8BD23;
        margin: 0 auto;
    }
     h1 {
     
        font-weight: 200;
        font-size: 65px;
        letter-spacing: 0px;
        line-height: 50px;
        color: black;
        padding-top: 20px;
        margin-bottom: 3px;
        text-align: center;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="left">
        <img class="img-responsive" src="img/g.png" style="margin: auto;">
    </div>
    <div class="mid">
        <h1>Priserna</h1>
        <span class="border"></span>
        <p style="text-align: center;margin-top: 15px;">Nedan hittar du alla våra tjänster vi har att erbjuda</p>
    </div>
    <div class="right">
        <img class="img-responsive" src="img/g.png" style="margin: auto;">
    </div>

有关制作2张图片的任何帮助都显示在文字的左侧，而右侧则很棒，

谢谢

4 个答案:

答案 0 :(得分：3)

将您的div包装在容器(here flex-container)中，并为其提供display:flex属性，如下所示：

.flex-container {
  display: flex;  /*Generates a flexbox layout with default flex direction as row */
  width: 100%; /* Not really required */
  align-items: center; /*Aligns contents vertically */
  justify-content: center; /*Aligns contents horizontally */
  text-align: center; /*Aligns further text in the center */
}

#restaurant-menu img {
  width: 100px;
  display: inline-block;
  vertical-align: top;
}

.border {
  display: block;
  height: 2px;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 78px;
  background: #F8BD23;
  margin: 0 auto;
}

h1 {
  font-weight: 200;
  font-size: 65px;
  letter-spacing: 0px;
  line-height: 50px;
  color: black;
  padding-top: 20px;
  margin-bottom: 3px;
  text-align: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="flex-container">
  <div class="left">
    <img class="img-responsive" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" style="margin: auto;">
  </div>
  <div class="mid">
    <h1>Priserna</h1>
    <span class="border"></span>
    <p style="text-align: center;margin-top: 15px;">Nedan hittar du alla våra tjänster vi har att erbjuda</p>
  </div>
  <div class="right">
    <img class="img-responsive" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" style="margin: auto;">
  </div>
</div>

答案 1 :(得分：2)

使用百分比作为宽度将起到作用，并使其响应

＆＃13;
＆＃13; 
Not enough arguments provided
＆＃13; 
.left,.mid,.right{
  float:left;
}
.left,.right{
  width:25%;
}
.left img,.right img{
  width:100%;
}
.mid{
width:50%;
}
#restaurant-menu img {
    width: 100px;
    display:inline-block;
    vertical-align:top;
}

.border {
    display: block;
    height: 2px;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 78px;
    background: #F8BD23;
    margin: 0 auto;
}
 h1 {

    font-weight: 200;
    font-size: 65px;
    letter-spacing: 0px;
    line-height: 50px;
    color: black;
    padding-top: 20px;
    margin-bottom: 3px;
    text-align: center;
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

您可以像这样尝试flex：

＆＃13;
＆＃13; 
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

#restaurant-menu img {
  width: 100px;
  display: inline-block;
  vertical-align: top;
}

.border {
  display: block;
  height: 2px;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 78px;
  background: #F8BD23;
  margin: 0 auto;
}

h1 {
  font-weight: 200;
  font-size: 65px;
  letter-spacing: 0px;
  line-height: 50px;
  color: black;
  padding-top: 10px;
  margin-bottom: 3px;
  text-align: center;
}
＆＃13; 
<div class="content">
  <div class="left">
    <img class="img-responsive" src="https://lorempixel.com/100/100/" style="margin: auto;">
  </div>
  <div class="mid">
    <h1>Priserna</h1>
    <span class="border"></span>
    <p style="text-align: center;margin-top: 15px;">Nedan hittar du alla våra tjänster vi har att erbjuda</p>
  </div>
  <div class="right">
    <img class="img-responsive" src="https://lorempixel.com/100/100/" style="margin: auto;">
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

或简单的内联块解决方案：

＆＃13;
＆＃13; 
.content {
  text-align: center;
}

.left,
.mid,
.right {
  display: inline-block;
  vertical-align: top;
}

#restaurant-menu img {
  width: 100px;
  display: inline-block;
  vertical-align: top;
}

.border {
  display: block;
  height: 2px;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 78px;
  background: #F8BD23;
  margin: 0 auto;
}

h1 {
  font-weight: 200;
  font-size: 65px;
  letter-spacing: 0px;
  line-height: 50px;
  color: black;
  margin-bottom: 3px;
  text-align: center;
}
＆＃13; 
<div class="content">
  <div class="left">
    <img class="img-responsive" src="https://lorempixel.com/100/100/" style="margin: auto;">
  </div>
  <div class="mid">
    <h1>Priserna</h1>
    <span class="border"></span>
    <p style="text-align: center;margin-top: 15px;">Nedan hittar du alla våra tjänster vi har att erbjuda</p>
  </div>
  <div class="right">
    <img class="img-responsive" src="https://lorempixel.com/100/100/" style="margin: auto;">
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

尝试添加此类。您还可以尝试根据需要更改宽度，并使用媒体查询来处理断点以使其响应。

＆＃13;
＆＃13; 
library(dplyr)

df2 <- df %>%
  group_by_at(vars(starts_with("Col"))) %>%
  summarise(TOTAL_FREQUENCY = sum(FREQUENCY)) %>%
  ungroup()
df2
# # A tibble: 5 x 4
#    Col1  Col2   Col3 TOTAL_FREQUENCY
#   <chr> <chr>  <chr>           <int>
# 1     A item1 CLASS1              12
# 2     A item2 CLASS2              10
# 3     B item2 CLASS1               8
# 4     B item3 CLASS3               2
# 5     C item4 CLASS2              16
＆＃13;
＆＃13;
＆＃13;

你也可以试试这个

＆＃13;
＆＃13; 
df <- read.table(text = "Col1    Col2        Col3    FREQUENCY   INTERVAL 
A       item1      CLASS1    4             1
                 A       item2      CLASS2    10            1
                 B       item2      CLASS1    5             1
                 B       item3      CLASS3    2             1
                 A       item1      CLASS1    8             2
                 C       item4      CLASS2    9             2
                 B       item2      CLASS1    3             3
                 C       item4      CLASS2    7             3",
                 header = TRUE, stringsAsFactors = FALSE)
＆＃13;
＆＃13;
＆＃13;

如果这不是您想要的结果，那么您可以提供更多细节或参考您实际想要实现的目标

相关问题
最新问题