我在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>
答案 0 :(得分:0)
尝试在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;
}
答案 1 :(得分:0)
.association_logos_container_left {
float: left;
}
.association_logos_container_right {
float: right;
}
&#13;