Question

HTML：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
 <link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
  <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
 <link rel="stylesheet" href="css/thisProject.css"/>
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <h1 class="text-primary">Wiki Article Search</h1>

  <div>
    <input type="text" id="input"/>
    <button id="search">Search</button>
    <a id="random" class="btn btn-primary" target="_blank" href="http://en.wikipedia.org/wiki/Special:Random">Press For Random</a>
  </div>
 </br>
  <div id="bodyDiv">
  </div>
   <script src="wikiViewer.js"></script>
</body>
</html>

JavaScript的：

(function(){
var searchBtn = document.getElementById('search');
//var body = document.getElementsByTagName('body')[0];
var input = document.getElementById("input");
var bodyDiv = document.getElementById('bodyDiv')
$(document).ready(function(){
  searchBtn.addEventListener('click', searchWiki);
  function searchWiki(){
    bodyDiv.innerHTML = "";
    var url = 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch='
    if (input.value === ""){
        return;
    }
    var searchTerm = input.value.replace(/\s/g, '%20');
    url = url + searchTerm + '&callback=?';
    $.getJSON(url, domMod); //change fileName to be whatever we wish to search
      function domMod(json){ //what to do with dom based on json file  NOTE WE NEED TO FIRST CHECK ANDREMOVE PREVIOUS SEARCH CONTENT
        var entry;
        if (!json.hasOwnProperty('query')){
            return;
        }
        if (!json.query.hasOwnProperty('pages')){
            return;
        }
        json = json.query.pages;
        var keys = Object.keys(json);
        var keysLength = keys.length;
        for (var i = 0; i < keysLength; i++){ 
            entry = json[keys[i]];
            var outterDiv = document.createElement('div');
            outterDiv.className = "entry";
            var imageDiv = document.createElement('div');
            imageDiv.className = "entryImg";
            var entryDiv = document.createElement('div');
            entryDiv.className = "entryTxt";
            outterDiv.appendChild(imageDiv);
            outterDiv.appendChild(entryDiv);
            entryDiv.innerHTML = '<h2>' + entry.title + '</h2>' + '<p>' + entry.extract + '</p>'
        if (entry.hasOwnProperty('thumbnail')){ //add image to our imageDiv child of entryDiv
            imageDiv.style.backgroundImage = "url('" + entry.thumbnail.source + "')"
        }
        var br = document.createElement('br');
        bodyDiv.appendChild(outterDiv); //appendChild to the Body 
        bodyDiv.appendChild(br);
    }
   }
 } 

  });
}())

CSS：

input{
    width:180px;
}
.entry{
    width:90%;
    margin-left:auto;
    margin-right:auto;
    height: 140px;
}
.entryTxt{
    margin-left: 5px;

}
.entryImg{
    width:125px;
    height:125px;
    margin-right: 5px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    float:left;
}
#bodyDiv{
    width: 100%;
    height: 1600px;
}

javascript代码运行维基百科API根据用户的搜索字词返回的每个返回对象。然后它将图像放在一个带有类＆＃34; entryImg＆＃34;的div中。以及名为＆＃34; entryTxt＆＃34;的div中的条目文本。然后将它们中的每一个放在一个标记为outterDiv的div中，该div被附加到我的HTML中已经使用id＆＃34; bodyDiv。＆＃34;我的问题是，在每个outterDiv中，无论我多少改变边距，为什么图片和文本的格式彼此如此接近。我把5px放在文本左边距上，5像素放在图片右边距上，可以看出并且更改没有出现在浏览器中。为什么这样，我该如何解决？

Answer 1

根据您的javascript代码，生成的HTML将是

<div id="bodyDiv">
    <div class="entry">
        <div class="entryImg"></div>
        <div class="entryTxt">
            <h2>lorem ipsum</h2>
            <p>lorem ipsum</p>
        </div>
    </div>
</div>

并且，使用您的CSS，您可以通过

增加图像和文本之间的空间

在margin-right上增加.entryImg

.entryImg {
    margin-right: 10px;
}

或者在margin-left上添加.entryTxt之后增加overflow: hidden;。

.entryTxt {
    margin-left: 10px;
    overflow: hidden;
}

检查此fiddle

如何在我的JS中动态创建的div上使用margin？

1 个答案: