Question

我在wordpress中遇到问题，我正在使用文本小部件对齐徽标。当我在本地或jsfiddle上构建html和css时，它工作得很好，但是当我尝试在wordpress上复制它时，它会变得有趣。以下是网站Logos on the write hand side，以下是我使用的代码jsfiddle of code。

有人能告诉我我需要做些什么才能让它在wordpress上看起来和在小提琴上看起来一样（I.E两列标识）

<!doctype html>        
<html>
    <head>
        <title>Put in title</title>
        <style>
            .association_logos_container_left 
            {
                max-width:140px;
                float:right;
            }
            .association_logos_container_left .association_logos_left img
            {
                max-width:100px;
                float:left;
                margin: 5px;
                display:block;  
            }  
            .association_logos_container_right {
                max-width:140px;
                float:right;
            }
            .association_logos_container_right .association_logos_right img
            {
                max-width:100px;
                float:right;
                margin: 5px;
                display: block;
            }
        </style>
    </head>    
<body>




     <div class="association_logos_container_left">

        <div class="association_logos_left"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/TUSLA-logo.jpeg" alt="Tusla"></div>
        <div class="association_logos_left"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/Turning-Point-logo.png" alt="Turning Point"></div>
        <div class="association_logos_left"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/Parenting-plus.jpeg" alt="Parenting Plus"></div>
        <div class="association_logos_left"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/Living-life-logo.jpeg" alt="Living life"></div>
        <div class="association_logos_left"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/Incredible-years.jpeg" alt="Incredible Years"></div>
    </div>     
    <div class="association_logos_container_right">


        <div class="association_logos_right"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/IACP-logo.jpeg" alt="IACP"></div>
        <div class="association_logos_right"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/HSE-Logo.jpeg" alt="HSE Logo"></div>
        <div class="association_logos_right"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/DIT-logo.jpeg" alt="DIT Logo"></div>
        <div class="association_logos_right"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/DCU-logo.jpeg" alt="DCU Logo"></div>
        <div class="association_logos_right"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/Crawford-Art-College-logo.jpeg" alt="Crawford Art College"></div>

     </div>

    </body>
    </html>

Answer 1

尝试在CSS文件末尾添加此内容

.association_logos_container_left {
  display: inline-block;
  width: 50%;
}

.association_logos_container_right {
  display: inline-block;
  float: right;
  max-width: 140px;
}

修改

或者你可以添加这个

.association_logos_container_left { display: inline-block; }

Answer 2

＆＃13;

.association_logos_container_left {
  float: left;
}

.association_logos_container_right {
  float: right;
}

＆＃13;

对齐在wordpress上没有正确显示

2 个答案: