Question

我有移动或小屏幕窗口浏览器的问题，当窗口浏览器宽度很小时，如移动屏幕文本将变为上一段或上面的照片图像如何解决此问题

＆＃13;

figure {
  margin:0px;
  margin-right:22px;
  display:inline-block;
}
figure img {
  vertical-align: top;
}
figure figcaption {
  max-width:150px;
  padding-top:8px;
  line-height:1em;
  text-align: center;
  font-size:15px !important;
}
#text{
  display:inline-block;
  position:absolute;
  margin:10px 0px; 
}

＆＃13;

<section>
    <div style="display:inline-block;padding-top:8px;">
        <figure>
            <img src="http://placehold.it/200x200" alt="missing" width="150">
            <figcaption>Album name goes here
                <br>Year goes here
            </figcaption>
        </figure>
    </div>
    <div id="text">
        <div style="font-size: 16px; margin-top: 0px;">“Knowing what to DO and Don’t with the customers allows them to close more sales and build an engaging, valuable and great experience with the customers. That OSN Super Agent course had a huge impact on our organizational performance across the region.”
            <span style="font-size: 14px;">[Firas Suleiman - Learning &amp; Development Delivery Manager - UAE]</span></div>
    </div>
</section>
<section>
    <div style="display:inline-block;padding-top:8px;">
        <figure>
            <img src="http://placehold.it/200x200" alt="missing" width="150">
            <figcaption>Album name goes here
                <br>Year goes here
            </figcaption>
        </figure>
    </div>
    <div id="text">
        <div style="font-size: 16px; margin-top: 7px;">“The most exciting part is the difference between the normal agent and the super-agent and how the way of super-agent effect or change the idea to the customer and how should we deal with it. The course changes a lot in me in approaching customers, and that helped me to overachieve my target this month.”
            <span style="font-size: 14px;">[Mujtaba Mohamed Ali - Direct location Leader – Bahrain]</span></div>
    </div>
</section>
<section>
    <div style="display:inline-block;padding-top:8px;">
        <figure>
            <img src="http://placehold.it/200x200" alt="missing" width="150">
            <figcaption>Album name goes here
                <br>Year goes here
            </figcaption>
        </figure>
    </div>
    <div id="text">
        <div style="font-size: 16px; margin-top: 7px;">“It was one of the best courses I completed on the LMS. The most exciting part is that one of the sales agents was the actor. He showed me how does it work in the field. I learned about the “Dos and Donts”, asking the customer about his/her preferences not mine. Listen carefully and make the customer feel valued.”
            <span style="font-size: 14px;">[Ahmed Hassan Ali - Customer care advisor – Egypt]</span></div>
    </div>
</section>

＆＃13;

Answer 1

为什么你在＆＃34; text＆＃34;中定位绝对？ DIV？问题来了。只需删除它并在css下面添加

#text {
    display: inline-block;
    /* position: absolute; */
    margin: 10px 0px;
    width: calc(100% - 200px);
    vertical-align: top;
}

＆＃13;

figure {
  margin:0px;
  margin-right:22px;
  display:inline-block;
}
figure img {
  vertical-align: top;
}
figure figcaption {
  max-width:150px;
  padding-top:8px; 
  line-height:1em;
  text-align: center;
  font-size:15px !important;
}
#text {
  display: inline-block;
  /* position: absolute; */
  margin: 10px 0px;
  width: calc(100% - 200px);
  vertical-align: top;
}

＆＃13;

<section>
    <div style="display:inline-block;padding-top:8px;">
        <figure>
            <img src="http://placehold.it/200x200" alt="missing" width="150">
            <figcaption>Album name goes here
                <br>Year goes here
            </figcaption>
        </figure>
    </div>
    <div id="text">
        <div style="font-size: 16px; margin-top: 0px;">“Knowing what to DO and Don’t with the customers allows them to close more sales and build an engaging, valuable and great experience with the customers. That OSN Super Agent course had a huge impact on our organizational performance across the region.”
            <span style="font-size: 14px;">[Firas Suleiman - Learning &amp; Development Delivery Manager - UAE]</span>
        </div>
    </div>
</section>
<section>
    <div style="display:inline-block;padding-top:8px;">
        <figure>
            <img src="http://placehold.it/200x200" alt="missing" width="150">
            <figcaption>Album name goes here
                <br>Year goes here
            </figcaption>
        </figure>
    </div>
    <div id="text">
        <div style="font-size: 16px; margin-top: 7px;">“The most exciting part is the difference between the normal agent and the super-agent and how the way of super-agent effect or change the idea to the customer and how should we deal with it. The course changes a lot in me in approaching customers, and that helped me to overachieve my target this month.”
            <span style="font-size: 14px;">[Mujtaba Mohamed Ali - Direct location Leader – Bahrain]</span>
        </div>
    </div>
</section>
<section>
    <div style="display:inline-block;padding-top:8px;">
        <figure>
            <img src="http://placehold.it/200x200" alt="missing" width="150">
            <figcaption>Album name goes here
                <br>Year goes here
            </figcaption>
        </figure>
    </div>
    <div id="text">
        <div style="font-size: 16px; margin-top: 7px;">“It was one of the best courses I completed on the LMS. The most exciting part is that one of the sales agents was the actor. He showed me how does it work in the field. I learned about the “Dos and Donts”, asking the customer about his/her preferences not mine. Listen carefully and make the customer feel valued.”
            <span style="font-size: 14px;">[Ahmed Hassan Ali - Customer care advisor – Egypt]</span>
         </div>
    </div>
</section>

＆＃13;

这是JSfiddle Demo

弄乱移动或小浏览器窗口上的文字？

1 个答案: