向左浮动，垂直对齐中间，显示表格单元格不起作用

时间：2016-01-07 07:28:51

标签： html css html5 css3

我想要左侧的图像和右侧的内容。但是当我使用浮动时，图像不在中间：左，也许有人给我一个解决方案？

HTML：

<div class="wrap-shop"><div class="pro-img">
<img src="http://tshop.r10s.com/c18/f19/b968/3a87/a005/a662/e954/11bee5abd6005056ae13f2.jpg?_ex=125x125"/></div>

<div class="kanan">
<div class="discount">
  40%
</div> <!-- end discount -->

<div class="judul">
  beauty korea beauty korea beauty korea beauty korea beauty korea
</div>

<div class="harga-coret">Rp<del>1,000,000</del></div>
    <div class="harga-asli">Rp 500,000</div>

    <div class="bonusRsp">
        300,000
    </div>

<span class="go-shop">
            Rincian Produk
        </span>

CSS：

   .wrap-pop{

    margin-top:10px;
}

.wrap-shop{
        border:solid #eaeaea 1px;
        width:100%;
        height:130px;

}

/* here is problem */

.pro-img{
    padding:2px;
    border:1px solid red;
    --float:left;   
    vertical-align: middle;
    display: table-cell;
    width:125px;
    height:125px;
    background: #fff;
    background-size:135px 100px;
    --border-right:2px solid #bf0000;
}

.pro-img img{
    max-width:125px;
    max-height:125px;
    border:1px solid yellow;


}

.kanan{
    border:3px solid brown;

}

.judul{
    font-family:Arial;
    font-weight:bold;
    margin-left:145px;
    text-transform:capitalize;
    text-decoration:none;
    margin-bottom:1px;
    color:black;
    font-size:12px;
    height:30px;
    border:1px solid red;
    overflow:hidden;
}

.discount{
    border:1px solid yellow;
    text-align:center;
    font-weight:bold;
    font-size:12px;
}

.discount::before { 
    content: "Diskon ";
}


.bonusRsp{
    color:#bf0000;
    margin-top:4px;
    margin-bottom:5px;
    font-size:12px;
}

.bonusRsp::before { 
    content: "Bonus ";
    color:black;
    font-size:12px;
}

.bonusRsp::after { 
    content: " Poin";
    color:black;
    font-size:12px;
}

.discount a{
    color:yellow;
}

.harga-coret{
    margin-top:5px;
    font-size:11px;
    margin-left:150px;
}

.harga-coret a{
    color:black;
    text-decoration:none;
}

.harga-asli{
    font-size:15px;
    color:#bf0000;
    font-weight:bold;
    margin-left:150px;
    margin-bottom:2px;
}

.harga-asli a{
    color:#bf0000;
    text-decoration:none;
}

.go-shop{
    border:1px solid #bf0000;
    border-radius:2px;
    width:120px;
    color:#bf0000;
    text-align:center;
    background-color:white;
    margin-left:9px;
    text-decoration:none;
    font-size:12px;

}

.judul a{
    color:black;
    text-decoration:none;
}

.go-shop a{
    color:black;
    text-decoration:none;
}

这是我的代码https://jsfiddle.net/dedi_wibisono17/m6snbftt/2/

谢谢。

3 个答案:

答案 0 :(得分：1)

--float:left;，将其更改为float:left;即可使用。 更新：添加顶部填充并降低高度。

请尝试以下：

.pro-img{
  padding-top:15px;
  padding-right:2px;
  border:1px solid red;
  float:left;   
  vertical-align: middle;
  display: table-cell;
  width:125px;
  height:111px;
  background: #fff;
  background-size:135px 100px;
  --border-right:2px solid #bf0000;
}

答案 1 :(得分：0)

添加此list: function(callback)课程 .factory('countries', function($http){ return { list: function(callback){ $http.get('../test.json').success(function(data, status, headers) { console.log("success"); console.log(data); //console.log(status); }).error(function(data, status) { //console.log("error"); // console.log(data); // console.log(status); }); } }; /* var x = { list: [ { "name": "China", "population": 1359821000, "flagURL": "//upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg", "capital": "Beijing", "gdp": 12261 }, { "name": "India", "population": 1205625000, "flagURL": "//upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg", "capital": "New Delhi", "gdp": 4716 }, { "name": "United States of America", "population": 312247000, "flagURL": "//upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg", "capital": "Washington, D.C.", "gdp": 16244 } ] }; console.log(x); return x; */ }) .controller('View2Ctrl', function ($scope, countries){ $scope.countries = countries.list; });

https://jsfiddle.net/m6snbftt/5/

答案 2 :(得分：0)

HI现在习惯了这段代码

<强>定义 

.kanan{display:table-cell;}

删除 float left .pro-img

演示

＆＃13;
＆＃13; 
.kanan{display:table-cell;vertical-align:top;}


.wrap-pop{
	
	margin-top:10px;
}
.wrap-shop{
		border:solid #eaeaea 1px;
		width:100%;
		height:130px;
		
}

/* here is problem */

.pro-img{
	padding:2px;
	border:1px solid red;
	vertical-align: middle;
    display: table-cell;
	width:125px;
	height:125px;
	background: #fff;
	background-size:135px 100px;
	--border-right:2px solid #bf0000;
}

.pro-img img{
	max-width:125px;
	max-height:125px;
	border:1px solid yellow;


}

.kanan{
	border:3px solid brown;
	
}

.judul{
	font-family:Arial;
	font-weight:bold;
	margin-left:145px;
	text-transform:capitalize;
	text-decoration:none;
	margin-bottom:1px;
	color:black;
	font-size:12px;
	height:30px;
	border:1px solid red;
	overflow:hidden;
}

.discount{
	border:1px solid yellow;
	text-align:center;
	font-weight:bold;
	font-size:12px;
}

.discount::before { 
    content: "Diskon ";
}


.bonusRsp{
	color:#bf0000;
	margin-top:4px;
	margin-bottom:5px;
	font-size:12px;
}

.bonusRsp::before { 
    content: "Bonus ";
	color:black;
	font-size:12px;
}

.bonusRsp::after { 
    content: " Poin";
	color:black;
	font-size:12px;
}

.discount a{
	color:yellow;
}

.harga-coret{
	margin-top:5px;
	font-size:11px;
	margin-left:150px;
}

.harga-coret a{
	color:black;
	text-decoration:none;
}

.harga-asli{
	font-size:15px;
	color:#bf0000;
	font-weight:bold;
	margin-left:150px;
	margin-bottom:2px;
}

.harga-asli a{
	color:#bf0000;
	text-decoration:none;
}

.go-shop{
	border:1px solid #bf0000;
	border-radius:2px;
	width:120px;
	color:#bf0000;
	text-align:center;
	background-color:white;
	margin-left:9px;
	text-decoration:none;
	font-size:12px;
	
}

.judul a{
	color:black;
	text-decoration:none;
}

.go-shop a{
	color:black;
	text-decoration:none;
}
＆＃13; 
<div class="wrap-pop">

<div class="wrap-shop">
  <div class="pro-img">
    <img src="http://tshop.r10s.com/c18/f19/b968/3a87/a005/a662/e954/11bee5abd6005056ae13f2.jpg?_ex=125x125"/>
  </div> <!-- end pro-img -->
  
  <div class="kanan">
    <div class="discount">
      40%
    </div> <!-- end discount -->
    
    <div class="judul">
      beauty korea beauty korea beauty korea beauty korea beauty korea
    </div>
    
    <div class="harga-coret">Rp<del>1,000,000</del></div>
		<div class="harga-asli">Rp 500,000</div>
		
		<div class="bonusRsp">
			300,000
		</div>
    
    <span class="go-shop">
				Rincian Produk
			</span>
    
  </div>
  
</div> <!-- end wrap shop -->

</div> <!-- end wrap-pop -->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题