2014-10-04 142 views
1
<style> 
    #middle .institutions 
    { 
     width:100%; 
     display:table; 
    } 
    #middle .institutions .institution 
    { 
     width:100%; 
     display:table-row; 
    } 
    #middle .institutions .institution .institution-image 
    { 
     display:table-cell; 
     width:50%; 
    } 
    #middle .institutions .institution .degree 
    { 
     display:table-cell; 
     width:50%; 
    } 
</style> 
<body> 
    <div id="middle"> 
     <div class="institutions">  
      <div class="institution"> 
       <div class="institution-image"> 
        <img src="jntuk.png" ></img> 
       </div> 
       <div class="degree"> 
        <p class="name">Rochester Institute of Technology</p> 
        <p>Master's - Information Technology</p> 
        <p>GPA:3.50</> 
        <a href="http://www.rit.edu" target="_new">www.rit.edu</a> 
       </div> 
     </div> 
    </div> 
</body> 

我不想使用浮动因为某些原因。可一些帮助我 链接screenshot- https://drive.google.com/file/d/0B4FKXRWc2y_CTFRZQUhWZk9oUVU/view?usp=sharingcss显示表单元格使右侧单元格向下移动

+0

欢迎SO。如果你能清楚地陈述你的挑战(问题),那将是非常棒的。然后,人们将能够帮助你。 – jazzurro 2014-10-04 00:40:21

回答

2

可以解决这个问题通过添加:vertical-align: top;

#middle .institutions .institution .degree { 
     display:table-cell; 
     vertical-align: top; 
     width:50%; 
    } 

下面是一个小提琴链接: http://jsfiddle.net/ayxg0x8j/

相关问题