Question

我试图在图片周围包裹一些文字。我发现了一些搜索stackoverflow的代码。它可以工作，但是当窗口大小调整到1200px以下时，文本没有环绕，图像保持在右边。

        <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媒体查询的情况下进行操作

----------＆GT; Demo Link＆LT; ----------

由于

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”后，对于小屏幕尺寸问题，您可以使用媒体查询并使图像宽度更小以包围一些文本。

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

Here the sample. Resize and check it.

包装文本aroud响应图像

1 个答案: