Question

<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>

我不想出于某些原因使用花车。可以帮助我一些截图链接 - https://drive.google.com/file/d/0B4FKXRWc2y_CTFRZQUhWZk9oUVU/view?usp=sharing

Answer 1

您可以通过添加：vertical-align: top;

来解决此问题

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

这是一个小提琴的链接： http://jsfiddle.net/ayxg0x8j/

css显示表格单元格右侧单元格向下移动

1 个答案: