Question

我试图找出为什么当我将文本插入水平滚动div中的一个div时，它会导致文本的父div向下推。有什么想法吗？

function uploadFile(file, url){
    var xhr = new XMLHttpRequest();
    var fd = new FormData();
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            numQueuedFilesCount++;
            // Every thing ok, file uploaded
            updateAttachmentList();
        } else if (xhr.readyState == 4) {
            // with some error
            console.log(xhr.responseText); // handle response.
        }
    };
    fd.append("uploadfile", file);
    xhr.send(fd);
}

IEnumerable

Answer 1

这是否满足您的要求？

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
//custom code by naren
body{
  overflow:hidden;
}
footer{
    height: 50px;
    bottom: 0px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.project_container {
    border: purple 4px solid;
    height: auto;
    width: auto;
    overflow: auto;
    white-space: nowrap;
    position: absolute;
    overflow-x: hidden;
    top: 50px;
    bottom: 50px;
    left: 0px;
    right: 0px;
}
header{
    position: absolute !important;
    top: 0px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
//custom code by naren
a {
  color:white;
  text-decoration:none;
  font-family:'Hind';
}

#bold_avenir {
  font-family:'Hind';
  font-weight:bold;
}

#head_link{
  text-transform:uppercase;
}

body{
  background-image: url('http://via.placeholder.com/300');
  background-size:cover;
}

.project_container{
  border:purple 4px solid;
  white-space: nowrap;
}

.pjct-fat{
  display:inline-block;
  width:800px;
  height:96%;
}

.pjct-skinny{
  display:inline-block;
  width:450px;
  height:96%;
}

#project_1{
  border:red 4px solid;
}

#project_1 p{
  display:block;
  border:red 4px solid;
}

#project_2{
  border:yellow 4px solid;
}
#project_3{
  border:green 4px solid;
}
#project_4{
  border:blue 4px solid;
}

＆＃13;

<html>
    <head>
        <meta charset="utf-8">
        <title>Paul Taylor Creates</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
      <nav><a href="" id="head_link"><span id="bold_avenir">Paul Taylor</span> Creative Design</a>
        </nav>
        </header>

      <div class="project_container"> 
        <div class="pjct-skinny" id="project_1">
          <div>First Project</div>
        </div>
        <div class="pjct-fat" id="project_2"> 
        </div>
        <div class="pjct-fat" id="project_3"> 
        </div>
        <div class="pjct-skinny" id="project_4"> 
        </div>
      </div>

        <footer class="footer">
          <a href=""><span id="bold_avenir" >Resume:</span> LinkedIn </a> 
          <a href=""><span id="bold_avenir">Contact:</span> paultaylorcreates@gmail.com</a>
        </footer>
    </body>
</html>

＆＃13;

还可以在JSFiddle下面找到：

https://jsfiddle.net/Kai_Draord/kz4uap1t/

当我向水平滚动添加文本时，它会向下推动其父div

1 个答案: