Question

我最近接受了一个为我的朋友建立网站的项目。它是一个房地产网站，你可以查看它here。

网站使用IDX从MLS提取数据。 MLS是一种多重上市服务，可以发布待售房屋并提供大量信息，IDX（互联网数据交换）抓取该信息并将其填充到您的网站。在我看来，它也不便宜。

使用IDX的东西，以及我的客户端使用的IDX，IDX Broker就是它们的代码适用于小部件和页面。它是可编辑的，但它们只有少数几种样式。如果你想要看起来不同的东西，你必须编辑他们的CSS。

我知道一些css，但没有我想要的那么多，而且我无法获得我想要重新设计的小部件的代码来做我想要的。

我想要的是左边的图像，右边的数据（文本），可能是两列，并与图像对齐。这个小部件最初设计时顶部的图像和文本中心在它下面对齐，这是我从这个小部件开始的代码。我更改了一些东西以获得右侧的文本和左侧的图像（float：left;），并且我将图像大小更改为350px的高度和宽度。右侧的文本位于容器顶部，与图像不对齐。此外，图像以不同的尺寸显示，并且看起来具有不同的边距大小。我不确定为什么会这样，但我猜它与MLS网站上的图像有关，它们是从哪里拉出来的。我试图增加浮动，边距和对齐中心以试图让事情看起来很好，但我已经玩了很多，但我没有运气。使用的选择器是由IDX设置的选择器和我必须使用的选择器。看起来它是用表格，行和单元格格式化的，但我不确定这些变化会对这些变化产生什么影响。还有一个带有伪类的类选择器，名为＃IDX-showcaseGallery-35264 .IDX-showcaseLink：在此之前我不确定是什么或做什么。我知道我必须将此宽度从100％更改为自动，以便在图像的右侧获得文本，而不是在图像下方。

无论如何，我会粘贴下面的代码。非常感谢任何和所有帮助。

#IDX-showcaseGallery-35264.IDX-showcaseTable { 
    table-layout:fixed; 
    border-spacing:8px; 
    font-size:11px; }
#IDX-showcaseGallery-35264 .IDX-showcaseRow { 
    display:table-row; }
#IDX-showcaseGallery-35264 .IDX-showcaseCell {
    display:table-cell; margin-top:20px;
}
#IDX-showcaseGallery-35264 .IDX-showcaseContainer {
    border:1px solid #666;
    -webkit-box-shadow: 1px 1px 3px rgba(22,22,22,.4);
    box-shadow: 1px 1px 3px rgba(22,22,22,.4);
    padding:3px;
}
#IDX-showcaseGallery-35264 .IDX-showcaseLink {
    height: 100%;
    width: auto;
    font-size: 0;
    text-align: center;
    display: inline-block;
    float: left;

}
#IDX-showcaseGallery-35264 .IDX-showcaseLink:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
}
#IDX-showcaseGallery-35264 .IDX-showcasePhoto {
    height: 350px;
    width: 350px;
    display: inline-block;
    float: left;
}
#IDX-showcaseGallery-35264 .IDX-showcaseCell div {
    text-align: center;}
/*#IDX-showcaseGallery-35264 .IDX-showcaseListingID,
#IDX-showcaseGallery-35264 .IDX-showcaseBeds,
#IDX-showcaseGallery-35264 .IDX-showcaseBaths,
#IDX-showcaseGallery-35264 .IDX-showcaseFull,
#IDX-showcaseGallery-35264 .IDX-showcasePartial,
#IDX-showcaseGallery-35264 .IDX-showcaseRemarks,
#IDX-showcaseGallery-35264 .IDX-showcaseDisclaimerLink,
#IDX-showcaseGallery-35264 .IDX-showcaseStatus,*/
#IDX-showcaseGallery-35264 .IDX-showcaseStateAbrv {display:none;}


#IDX-showcaseGallery-35264 .IDX-showcaseContainer {
    position:relative; 
    margin-top: 40px;}

Answer 1

考虑使用＆＃34;！important＆＃34;在您的自定义css＆＃39;覆盖插件的默认css。

例如：

#IDX-showcaseGallery-35264 .IDX-showcasePhoto {
    height: 350px!important;
    width: 350px!important;
    display: inline-block!important;
    float: left!important;
}

无法使用CSS格式化第三方窗口小部件

1 个答案: