Question

我想在这张照片中以2行和2列渲染图像和文字。当重新调整浏览器宽度时（我使用媒体查询）（Desired apperance- http://i.imgur.com/qReaDlP.jpg），右侧图像和文本之间的差距应相同。我面临的问题是当我在某些时候缩放浏览器时文本会被错误对齐。它出现在图像下方一行。 enter image description here html和css代码位于下面的小提琴链接中。任何关于出了什么问题的建议都非常感谢。我道歉要删除实际文本。

div class="freedom_carousel">   <!--Freedom section -->

<p class="heading"> This is heading. </p> 

<div class="container1">
<div class="col1"><img class="icon" src="/path/to/image" > <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span></div>
<div class="col2"><img class="icon" src="/path/to/image" > <span class="icon-text"><b>This is</b> Text Text Text TextText TextText TextText Text </span></div>
</div>  <!--End of container 1 -->

<div class="container2">
<div class="col1"><img class="icon" src="/path/to/image"  > <span class="icon-text"><b>Access </b> Text TextText TextText TextText TextText TextText TextText TextText Text</span></div>
<div class="col2"><img class="icon" src="/path/to/image" > <span class="icon-text"><b>This is</b> Text TextText TextText TextText TextText TextText TextText Text</span></div>
</div> <!--End of container 2 -->



</div>

http://jsfiddle.net/zwqvo65f/

如果你重新调整小提琴的结果窗口的宽度，它反映了我的解释。我希望能更好地解释问题。

Answer 1

尝试将图标和文字放在同一个p标签或类似的东西中：

<p><img class='icone'/> text in here </p>

Answer 2

像这样更改HTML：

<div class="freedom_carousel">
    <!--Freedom section -->
    <p class="heading">This is heading.</p>
    <div class="container1">
        <div class="col1">
            <p>
                <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
            </p>
        </div>
        <div class="col2">
            <p>
                <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
            </p>
        </div>
    </div>
    <!--End of container 1 -->
    <div class="container2">
        <div class="col1">
            <p>
                <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
            </p>
        </div>
        <div class="col2">
            <p>
                <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
            </p>
        </div>
    </div>
    <!--End of container 2 -->
</div>
</div>
<!--End of Freedom carousel -->

和你的CSS一样：

.freedom_carousel {
    border:2px solid red;
    float: left;
}
.freedom_carousel .heading {
    font-family:"HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica";
    font-size: 20pt;
    color: #252525;
    font-style: normal;
    text-align: center;
    line-height: 24pt;
    letter-spacing: 0em;
}
.freedom_carousel .container1 {
    float:left;
    width:100%;
}
.freedom_carousel .container2 {
    float:left;
    width:100%;
    margin-top: 1%;
}
.freedom_carousel .col1 {
    float:left;
    margin-left: 13%;
    width:40%;
}
.freedom_carousel .col2 {
    float:left;
    width:40%;
}
.freedom_carousel .icon {
}
.freedom_carousel .icon-text {
    font-family:"HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica";
    font-size: 16pt;
    color: #252525;
    font-style: normal;
    text-align: left;
    line-height: 22pt;
    letter-spacing: 0em;
    margin-left: 5%;
}
. .features {
    border:2px solid red;
    float: left;
}
.features .heading {
    font-family:"HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica";
    font-size: 20pt;
    color: #252525;
    font-style: normal;
    text-align: center;
    line-height: 24pt;
    letter-spacing: 0em;
}
.col1 p, .col2 p {
    display:block;
}
.col1 img, .col1 span, .col2 img, .col2 span {
    display:inline-block;
    float:none
}
.icon {
    width:10%;
}
.icon-text {
    width:80%
}

Fiddle here您可能需要根据需要调整最后两行宽度值，但无论如何都会有效

将图像和文本对齐在同一行

2 个答案: