在列中的图像下包装文本

时间：2017-10-09 08:15:21

标签： html css media-queries

我有一个包含三列的部分。一切看起来都很好。我为相关部分写了一个媒体查询。第一列具有图像，第二列具有与图像相关的文本，第三列具有联排别墅地址。我真正想要的是当我在424px下调整窗口大小时它们被包裹在列中。我的意思是第二列中与图像相关的文本应位于图像的右侧，溢出的文本应包裹在图像下方 （图片取自How to wrap text around an image?）

enter image description here

即，col1和col2应占宽度的一半，第三列col3应向下移动并居中。

以下是代码：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*===============
    column- Grids
=====================*/

.col {
    display: inline-block;
    float: left;
    margin-right: 4%;
}
.col:last-child {
    margin-right: 0;
}
.col1 {width: 4.66%}
.col2 {width: 13.32%;}
.col3 {width: 21.98%;}
.col4 {width: 30.64%;}
.col5 {width: 39.3%;}
.col6 {width: 47.96%;}
.col7 {width: 56.62%;}
.col8 {width: 65.28%;}
.col9 {width: 73.94%;}
.col10 {width: 82.6%;}
.col11 {width: 91.26%;}
.col12 {width: 100%;}


.fancy-title {
    font-size: 13px;
    color: #c91544;
    font-weight: 600;
}
.fancy-heading {
    font-size: 32px;
    padding-bottom: 50px;
    font-weight: 800;
    letter-spacing: 2px;
}
.iva-govern {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
  list-style-type: none;
}

.govern-data p {
    padding-bottom: 20px;
    font-size: 14px;
    font-weight: lighter;
}
.govern-data img {width: 50%;}
.col5 h5 {padding: 10px 0;}
.govern-contact {
    background-color: #142738;
    color: #fff;
}
#iva-place {padding: 20px 30px;}
#iva-place li {
    padding: 3px 0;
    font-size: 13px;
}
#iva-place i {
    float: left;
    padding: 5px;
    width: 20px;
    font-size: 15px;
    text-align: center;
}
#iva-place p {
display:block;
overflow:hidden;
padding-top: 2px;
}
. >.col3 ul {padding: 20px 10px;}
.iva-govern>.col3 ul li {padding: 6px;}
.iva-govern>.col3 hr {margin: 30px;}

.iva-govern .iva-socials {
    padding: 20px 0;
    border-top: 1px solid grey;
    text-align: center;
    
}
.iva-govern .iva-socials i:hover {
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    color: #eeeeee;
}
.iva-govern .iva-socials span a {padding: 0 10px;color: #476076;}

@media only screen
and (min-width: 425px)
and (max-width: 767px) {
	.section-row {
		padding: 40px 0;
	}
	.iva-govern .col4,
	.iva-govern .col5 {
		width: 47%;
		margin-right: 0;
		padding-bottom: 10px;
	}
  .iva-govern .col3 {
    width: 60%;
    margin: 0 auto;
  }
	.govern-images img {
		max-width: 300px;
    width: 100%;
		height: 300px;
	}
  

}
<head><script src="https://use.fontawesome.com/a2e210f715.js"></script></head>
<div class="section-row iva-govern">
  <div class="section-inner clearfix">
    <div class="col col4">
        <div class="govern-images">
          <img src="https://image.ibb.co/mK6MQb/staff3.jpg" style="width:100%;" alt="mayor">
        </div><!--iva govern image-->
    </div><!--end of col4-->

        <div class="col col5">
          <div class="govern-data">
            <h4 class="fancy-title">I'M TOWN MAYOR</h4>
            <h3 class="fancy-heading">Stephnie Gizzel</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper orci quis sem viverra, non iaculis arcu commodo. Praesent orci enim, pretium vel faucibus eget, malesuada a elit. Nulla finibus vulputate tellus placerat cursus. In commodo, leo sit amet suscipit semper, erat justo malesuada lacus, elementum congue ligula metus eu neque. In pellentesque dui urna, nec convallis diam facilisis eget.</p>
            <p> Mauris ornare purus vel leo consequat, in cursus sem finibus. In euismod est eget elit ullamcorper cursus. leo consequat, in cursus sem finibus. In euismod est eget elit ullamcorper cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ultricies</p>
            <p>best regards,</p>
            <img src="assets/images/sign1.jpg" alt="signature">
          </div><!--iva govern text-->
        </div><!--end of col5-->

        <div class="col col3">
          <div class="govern-contact">
            <div><img src="https://image.ibb.co/iLZKBG/residential2.jpg" style="width:100%;" alt="parliament"></div>
            <ul id="iva-place">
              <li><i class="fa fa-phone"></i><p>Office: 040-(240) 56052</p></li>
              <li><i class="fa fa-envelope-o"></i><p>mayor@urban.com</p></li>
              <li><i class="fa fa-map-marker"></i><p>4'th avenue, 6th street, Malboro</p></li>
            </ul>
            <div class="iva-socials">	
              <span><a href="https://www.phone.com/"><i class="fa fa-phone"></i></a></span>
              <span><a href="https://twitter.com/login?lang=en"><i class="fa fa-twitter"></i></a></span>
              <span><a href="https://facebook.com"><i class="fa fa-facebook"></i></a></span>
              <span><a href="https://dribbble.com/"><i class="fa fa-dribbble"></i></a></span>
            </div>
          </div><!--govern contact-->
        </div><!--end of col3-->

  </div><!--section inner-->
</div><!--section row and iva govern-->

0 个答案:

没有答案
相关问题
最新问题