Question

我正在为这个项目进行Instagram搜索。我得到了我想要的结果，我希望主图像显示主照片下方的用户配置文件的小缩略图，以及用户名等。现在我正在努力只使用照片下的用户的小缩略图获取主图像。现在，我得到的主要照片和个人资料照片占据了div的整个宽度。我无法移动它，Chrome开发者工具显示完全忽略了我对这些子div的css。

以下是CSS代码段：

html {}
body { font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; }

small { display: block; color: #555; padding: 10px 0px; }

#searchresults {  width: 960px; }

#sform { width: 710px; margin: 0 auto; margin-top: 25px; margin-bottom: 35px; }
#sform #s { 
    padding: 10px 11px; 
    padding-left: 60px;
    color: #999; 
    width: 200px; 
    border: 1px solid #ddd; 
    font-size: 22px; 
.
.
.
.
#photos { margin-left: 100px; text-align: center; }

#box { width:180px;
    height:260px;
    display:inline-block;
    margin-left:20px;
    margin-bottom:30px; }

#box .mainimg { width: 160px;
       height 230px; }

#box .footer { width: 180px;
      height: 30 px; }

和HTML：

<body>
<div id="searchresults">
<section id="sform"><input autocomplete="off" class="sfield" id="s" name="s"    placeholder="Enter a search tag..." type="text" /></section>

<section id="photos"></section>
</div>
</body>

和#each传递的代码

    <div class="box"><div class="box.mainimg"><a href="'+data[i].url+'" target="_blank"><img src="'+data[i].thumb+'"></a></div><div class="box.footer"><img src="'+data[i].avatar+'"></div></div>'

提前致谢。我似乎无法在任何地方找到它。

Answer 1

因为你已经改变了它#box img {} - 同样在html中你可以放置class =“mainimg”并且因为div在box div中你可以用#box调用它.mainimg css选择器

我重新读了这篇文章并且有效。 css很挑剔!!

Answer 2

在你的html中，你已经为你的盒子div分配了一个类，而不是一个id - 在css你的选择器指向一个盒子id。

所以

.box { width:180px;
    height:260px;
    display:inline-block;
    margin-left:20px;
    margin-bottom:30px; }

.box .mainimg { width: 160px;
       height 230px; }

.box .footer { width: 180px;
      height: 30 px; }

应该修复它 - 或将div更改为id="box"

无法控制Div内的Div的大小/位置

2 个答案: