CSS стили, float

226

22 июня 2017, 02:50

Здравствуйте, у меня имеется колонна. На ней есть две сетки col-6 (bootstrap). В этих сетках имеется Текст и картинка. Когда я даю значение в левой колонне в картинке float: left;, и тексту также float: left;, то все нормально (https://prnt.sc/fm38f1), но как поступить в правой колонне? Мне нужно чтобы текст и картинка были справа, но также чтобы эта картинка как в раз была слева от текста как в https://prnt.sc/fm38f1. Ведь сделав также - получается https://prnt.sc/fm3944 . Как поступить? Вот код:

HTML

<div class="container">
<div class="col col-md-6" >
<img class="totallisthimg" id="totallist-left" src="/assets/img/l1.png">
<p class="totallisth" id="totallist-left"><small class="redtext">9</small><br>COUNTRIES</p>
</div>
<div class="col col-md-6">
<img class="totallisthimg" src="/assets/img/l2.png">
<p class="totallisth" id="totallist-right"><small class="redtext">9</small><br>TOTAL LISTENERS</p>
</div>
</div>

CSS

#totallist-left {
  font-weight: normal;
  float: left;
}
#totallist-right {
  font-weight: normal;
  float: right;
}
.totallisth {
  font-weight: 400;
  font-size: 23px;
  text-align: left;
}
.totallisthimg {
  float: left;
  height: 100px;
  width: 100px;
  margin-right: 1%;
}

Вот скрины:

https://prnt.sc/fm35hd
https://prnt.sc/fm36a5

Answer 1

Добрый день, вам нужно центровать не картинки и текст а сами контейнеры div и все будет работать как положено. Могу предложить вариант на flex-box

.container{ 
 display: flex; 
 justify-content: space-between; 
} 
.totallisth { 
  font-weight: 400; 
  font-size: 10px; 
  font-weight: normal; 
  white-space: nowrap 
} 
.totallisthimg { 
  float: left; 
  height: 30px; 
  width: 30px; 
  margin-right: 1%; 
}

	<div class="container"> 
 
<div class="col col-md-6" > 
				<img class="totallisthimg" id="totallist-left" src="blink.png"> 
				<p class="totallisth" id="totallist-left"><small class="redtext">9</small><br>COUNTRIES</p> 
		  </div> 
 
       
		<div class="col col-md-6"> 
				<img class="totallisthimg" src="blink.png"> 
				<p class="totallisth" id="totallist-right"><small class="redtext">9</small><br>TOTAL LISTENERS</p> 
    </div> 
     
	</div>

Вот вариант без флекса если будет более 2х

	.container{ 
		text-align: justify; 
	} 
	.container:after{ 
		content: ''; 
		display: inline-block; 
		width: 100%; 
	} 
	.container>*{ 
		display: inline-block; 
	  margin: 5px 0; 
	} 
 
	.totallisth { 
	  font-weight: 400; 
	  font-size: 10px; 
	  font-weight: normal; 
	  white-space: nowrap 
	} 
	.totallisthimg { 
	  float: left; 
	  height: 30px; 
	  width: 30px; 
	  margin-right: 1%; 
	}

	<div class="container"> 
		<div class="col col-md-6" > 
				<img class="totallisthimg" id="totallist-left" src="blink.png"> 
				<p class="totallisth" id="totallist-left"><small class="redtext">9</small><br>COUNTRIES</p> 
			</div> 
       
			<div class="col col-md-6"> 
				<img class="totallisthimg" src="blink.png"> 
				<p class="totallisth" id="totallist-right"><small class="redtext">9</small><br>TOTAL LISTENERS</p> 
			</div> 
       
<div class="col col-md-6"> 
				<img class="totallisthimg" src="blink.png"> 
				<p class="totallisth" id="totallist-right"><small class="redtext">9</small><br>TOTAL LISTENERS</p> 
			</div> 
	</div>

Answer 2

Насколько я понял, Вам нужно во второй колонке поменять местами картинку и текст и тогда сделать float:right обоим элементам.

  #totallist-left { 
      font-weight: normal; 
      float: left; 
    } 
    #totallist-right { 
      font-weight: normal; 
      float: right; 
    } 
    .totallisth { 
      font-weight: 400; 
      font-size: 23px; 
      text-align: left; 
    } 
    .totallisthimg { 
      float: left; 
      height: 100px; 
      width: 100px; 
      margin-right: 1%; 
    } 
    .totallisthimg-right { 
      float:right; 
    }

<div class="container"> 
    <div class="col col-md-6" > 
    <img class="totallisthimg" id="totallist-left" src="http://s1.iconbird.com/ico/2013/11/504/w128h1281385326510smartphone.png"> 
    <p class="totallisth" id="totallist-left"><small class="redtext">9</small><br>COUNTRIES</p> 
    </div> 
    <div class="col col-md-6"> 
    <p class="totallisth" id="totallist-right"><small class="redtext">9</small><br>TOTAL LISTENERS</p> 
    <img class="totallisthimg totallisthimg-right" src="http://s1.iconbird.com/ico/2013/11/504/w128h1281385326510smartphone.png"> 
    </div> 
    </div>

Хотя это решение не подойдёт, если на маленьких экранах нужно будет чтобы и в этих колонках было по левому краю