html - 将文本环绕响应图像

Question

我正在尝试将一些文本环绕在图像周围。我从搜索计算器中找到了一些代码。它可以工作，但是当窗口的大小调整到 1200 像素以下时，文本不会环绕，图像保持在右侧。

        <div class="col-md-12">
            <div id="zoi_img"><img class="img-responsive img-thumbnail pull-right" src="img/Asfaleia Zois.jpg" alt="Ασφάλεια Ζωής" width="640" height="450"></div>          
            <h4 class="inline-link-2">Προστασία για εσάς και την οικογένεια σας</h4>
            <p>Μέσα στη λέξη "ζωή" περιλαμβάνεται η ύπαρξη αλλά και η δημιουργία κάποιου. Πράγματα μικρά και μεγάλα που καθορίζουν το στίγμα μας και τα οποία θέλουμε να προστατέψουμε από οποιοδήποτε κίνδυνο μπορεί να τα απειλήσει.</p>
            <p>Η Εθνική σας δίνει τη δυνατότητα να τα προστατέψετε με τα εξειδικευμένα ασφαλιστικά μας προγράμματα</p>
            <ul>
                <li><a class="item_link" href="#a1">Απλή Ασφάλεια Ζωής</a></li>
                <li><a class="item_link" href="#a2">Απλή Ανανεώσιμη Ασφάλεια Ζωής</a></li>
                <li><a class="item_link" href="#a3">Απλή Μετατρέψιμη Ασφάλεια Ζωής</a></li>
                <li><a class="item_link" href="#a4">Απλή Αναεώσιμη και Μετατρέψιμη Ασφάλεια Ζωής</a></li>
                <li><a class="item_link" href="#a5">Απλή Μειούμενη Ασφάλεια Ζωής</a></li>
            </ul>
            <p>Ακόμη μπορείτε να ενισχύσετε περισσότερο τα ασφαλιστήρια σας μέσα από την πλήρη σειρά Συμπληρωματικών Ωφελημάτων που προσφέρουμε.</p>
            <h4 style="color:#d65150" id="a1">Απλή Πρόσκαιρη Ασφάλεια - Term Insurance</h4>
            <p>Η παραδοσιακή αυτή ασφάλιση έχει σαν σκοπό την εξασφάλιση των δικαιούχων από το θάνατο του ασφαλισμένου. Σε θάνατο του ασφαλισμένου οι δικαιούχοι λαμβάνουν το ποσό του κεφαλαίου ασφάλισης. Στην λήξη δεν υπάρχει ποσό καταβολής καθότι το συμβόλαιο αυτό δεν δημιουργεί αξίες εξαγοράς.</p>
            <h4 style="color:#d65150" id="a2">Απλή Ανανεώσιμη Πρόσκαιρη Ασφάλεια - Renewable Term Insurance</h4>
            <p>Η παραδοσιακή αυτή ασφάλιση έχει σαν σκοπό την εξασφάλιση των δικαιούχων από το θάνατο του ασφαλισμένου. Σε θάνατο του ασφαλισμένου οι δικαιούχοι λαμβάνουν το ποσό του κεφαλαίου ασφάλισης. Στην λήξη δεν υπάρχει ποσό καταβολής καθότι το συμβόλαιο αυτό δεν δημιουργεί αξίες εξαγοράς.</p>
            <h4 style="color:#d65150" id="a3">Απλή Μετατρέψιμη Πρόσκαιρη Ασφάλεια - Convertible Term Insurance</h4>
            <p>Η παραδοσιακή αυτή ασφάλιση έχει σαν σκοπό την εξασφάλιση των δικαιούχων από το θάνατο του ασφαλισμένου. Σε θάνατο του ασφαλισμένου οι δικαιούχοι λαμβάνουν το ποσό του κεφαλαίου ασφάλισης. Στην λήξη δεν υπάρχει ποσό καταβολής καθότι το συμβόλαιο αυτό δεν δημιουργεί αξίες εξαγοράς.</p>
            <h4 style="color:#d65150" id="a4">Απλή Ανανεώσιμη ή Μετατρέψιμη Πρόσκαιρη Ασφάλεια - Renewable or Convertible Term Insurance</h4>
            <p>Η παραδοσιακή αυτή ασφάλιση έχει σαν σκοπό την εξασφάλιση των δικαιούχων από το θάνατο του ασφαλισμένου. Σε θάνατο του ασφαλισμένου οι δικαιούχοι λαμβάνουν το ποσό του κεφαλαίου ασφάλισης. Στην λήξη δεν υπάρχει ποσό καταβολής καθότι το συμβόλαιο αυτό δεν δημιουργεί αξίες εξαγοράς.</p>
            <h4 style="color:#d65150" id="a5">Απλή Μειούμενη Ασφάλεια</h4>
            <p>Η παραδοσιακή αυτή ασφάλιση έχει σαν σκοπό την εξασφάλιση των δικαιούχων από το θάνατο του ασφαλισμένου. Σε θάνατο του ασφαλισμένου οι δικαιούχοι λαμβάνουν το ποσό του κεφαλαίου ασφάλισης. Στην λήξη δεν υπάρχει ποσό καταβολής καθότι το συμβόλαιο αυτό δεν δημιουργεί αξίες εξαγοράς.</p>
        </div>

现在我使用了这个媒体查询

@media(max-width:1200px) {
    #zoi_img img{float:none!important;}
}

并且图像在本地在我的电脑上固定在右侧流动但是文本没有环绕并且有另一种方法可以在不使用上面的 css 媒体查询的情况下做到这一点

---------> Demo Link <------------

谢谢

Answer 1

只需添加“float : right;” div 的样式如下。

<div class="" style="float:right;"><img class="img-responsive img-thumbnail pull-right" src="img/Asfaleia Zois.jpg" alt="Ασφάλεια Ζωής" width="640" height="450"></div>

然后删除“display: inline-block;”来自“inline-link-2”的样式。
同时删除“col-md-12”。

删除“col-md-12”后，对于小屏幕尺寸问题，您可以使用媒体查询并缩小 imahe 宽度以在其周围包裹一些文本。

@media(max-width: 991px) {
    img{width:300px !important;}
}

Here the sample. Resize and check it.