Question

如何让我的<div>元素的col类响应？

我希望文本内容和图像并排显示。仅当屏幕尺寸太小时，图像才会下降。像移动屏幕一样。

以下是我的图片和内容的HTML和CSS代码的一部分：

.content-style {
    font-size: 20px;
    font-family: cursive;
}

#image-position {
    width: 40%;
    border-radius: 700px;
}

<div class="row">
    <div class="column-left">
        <p class="content-style"> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more. Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics. </p>
    </div>
    <div class="column-right">
        <img align="right" id="image-position" class="img-responsive" src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c" alt="Goku's Image">
    </div>
</div>
<hr/>
</div>

Answer 1

如果您可以使用Bootsrap，则可以使用此更新的代码段。否则，您需要实施自己的媒体规则。

     .content-style
    {
      font-size: 20px;
      font-family: cursive;
    }
    
    @media (min-width: 992px){
    	.content-style{
	    	float: left;
	    }
	    
	    #image-position{
	      float: right;
	    }
    }
    
    @media (max-width: 992px){
	    #image-position{
	      margin: auto;
	    }
    }
        
    
    
    #image-position{
      width:40%;
      border-radius: 700px;
    }
    
    .row.someDiv{
      margin-left: 0px;
      margin-right: 0px;
    }
    
    .row.someDiv .col-md-4{
      	padding-right: 0px;
    	margin-right: 0px;
    }
    
    .row.someDiv .col-md-8{
      	padding-left: 0px;
    	margin-left: 0px;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	<div class="row someDiv">
		<div class="col-md-4">
			<p class="content-style">Hola! I am Gaurav, I work at Torry
				Harris as an IFW Support Analyst. I love coding and I wanna build my
				career in a lot of fields. If I could name some right way, they
				would be, Web Development, SOA Technologies, Automation Testing and
				a lot more. Apart from these I also love to read. The genre of my
				liking are Fiction, Adventurous, and Epics.</p>
		</div>
		<div class="col-md-8">
			<img id="image-position" class="img-responsive"
				src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c"
				alt="Goku's Image">
		</div>
	</div>
	<hr />

Answer 2

对于简单的2列布局，请考虑使用父元素的display: flex属性和子元素的flex: 1属性。要在较小的屏幕上改进响应式布局，请使用媒体查询将显示类型更改回“阻止”。

 <style>
     .wrapper { 
         max-width: 480px;
         margin: 0 auto;
     }
     .wrapper .row { 
         display: flex;
         /* extra code if you want to center the child elements */
         align-items: center;
         justify-content: center;
     }
     .wrapper .row > .column-left { 
         flex: 1; 
     }
     .wrapper .row > .column-right { 
         flex: 1; 
     }
     .wrapper .img-responsive { 
         max-width: 100%; 
         float: initial;
     }
     @media screen and (max-width:600px) {
         .wrapper .row { 
             display: block;
         }
     }
 </style>

  <div class="wrapper">
        <div class="row">
              <div class="column-left">
                    <p class="content-style"> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more. Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics.</p>
              </div>
              <div class="column-right">
                    <img align="right" id="image-position" class="img-responsive" src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c" alt="Goku's Image">
              </div>
        </div>
  </div>

Answer 3

你能用漂浮物吗？试试这个：

.column-left{
    float:left;
    display:inline-block;
    width:50%;
}

.column-right{
    float:right;
    display:inline-block;
            width:50%;
}

通过使图像内联块并将宽度设置为50％，它们将显示在同一行中。浮动使它们尽可能向左或向右移动。

Answer 4

<style>
  .content-style {
    font-size: 20px;
    font-family: cursive;
  }
  
  .right {
    width: 49%;
    float: left;
    margin-left: 10px;
    background-image: url('https://img1.ibxk.com.br/2014/06/13/13145034906534.jpg?w=480&h=560&mode=crop');
    min-height: 200px;
    height: 30%;
    padding-top: 10px;
    background-size: 100% 100%;
    border-radius: 700px;
  }
  
  .left {
    width: 50%;
    float: left;
    height: 30%;
    padding-top: -top: 10px;
  }
  
  @media screen and (max-width: 500px) {
    .breaker {
      clear: both;
      display: inline;
      height: 100px;
    }
    .left {
      clear: both;
      display: inline;
    }
    .right {
      clear: both;
      display: inline;
    }
  }
</style>
<div style="width: 100%;">
  <div class="left">
    <p> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more.
      Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics. </p>
  </div>
  <div class="breaker"><br></div>
  <div class="right">
  </div>
</div>
</div>

使<div>的col类响应

4 个答案: