Question

我有以下页面布局，当我向div card添加div时page，div整个div向下移动。

如果我删除了card类/*******************page layout**************************/ .container { width: 100%; background-color: #d5d5d5; } .sidebarcontainer { width: 250PX; height: 6000px; display: inline-block; box-sizing: border-box; padding: 5px; padding-right: 2px; } .innersidebarcontainer { position: relative; width: 100%; height: 100%; } .sidebar { width: 243px; background-color: white; height: 500px; top: 1px; position: absolute; } .mainpage { width: calc(100% - 250px); padding: 5px; padding-left: 2px; height: 6000px; display: inline-block; box-sizing: border-box; } .page { width: 100%; height: 100%; background-color: white; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; align-content: flex-start; } .footer { height: 500px; width: 100%; margin: 0 auto; background-color: #031003; } /***************end of pagelayout******************/ .card { width: 250px; /*height: 400px;*/ align-self: flex-start; margin: 10px; display: inline-block; } .image { width: 200px; margin: 0 auto; height: 250px; } .image img { width: 100%; height: 100%; }，那么每件事情都会恢复正常。

问题是什么并解决这个问题？

代码：https://jsfiddle.net/5t0ybLn2/

<body>
  <div class="container">
    <div class="sidebarcontainer">
      <div class="innersidebarcontainer">
        <div class="sidebar">
        </div>
      </div>
    </div>
    <!--
    -->
    <div class="mainpage">
      <div class="page">

        <div class="card">
          <div class="image">
            <img src="http://winsupersite.com/site-files/winsupersite.com/files/archive/winsupersite.com/content/content/143119/pr8.jpg">
          </div>
          <div class="info">
            <span>This is name of book</span>
            <span>this is author</span>
            <span>this is price</span>
            <span>this is rating</span>
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="footer"></div>
</body>

Fatal error: Allowed memory size of XXXXX bytes exhausted (tried to allocate XXX bytes) in XXX\my_sql.php

Answer 1

您只需将display: flex属性添加到container课程即可。

.container{
  width: 100%;
  background-color: #d5d5d5;
  display: flex;
}

工作示例here

Answer 2

这样做

＆＃13;

 @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    //Returning the layout file after inflating
    //Change R.layout.tab1 in you classes
    View myInflatedView = inflater.inflate(R.layout.tab1, container,false);

    TextView tv = (TextView) myInflatedView.findViewById(R.id.textView1);
    tv.setText("Name:"+ " Ken");

    TextView t = (TextView) myInflatedView.findViewById(R.id.textView2);
    t.setText("Score: " +getBestScore());

    return myInflatedView;

}

protected int getBestScore() {
    SharedPreferences prefs = getContext().getSharedPreferences("gamepanel", MODE_PRIVATE);
    return prefs.getInt("bestScore", 0);
}

＆＃13;

/*******************page layout**************************/

.container {
  width: 100%;
  display:flex;
  background-color: #d5d5d5;
}

.sidebarcontainer {
  width: 250PX;
  height: 6000px;
  display: inline-block;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 2px;
}

.innersidebarcontainer {
  position: relative;
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 243px;
  background-color: white;
  height: 500px;
  top: 1px;
  position: absolute;
}

.mainpage {
  width: calc(100% - 250px);
  padding: 5px;
  padding-left: 2px;
  height: 6000px;
  display: inline-block;
  box-sizing: border-box;
}

.page {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  align-content: flex-start;
}

.footer {
  height: 500px;
  width: 100%;
  margin: 0 auto;
  background-color: #031003;
}


/***************end of pagelayout******************/

.card {
  width: 250px;
  /*height: 400px;*/
  align-self: flex-start;
  margin: 10px;
  display: inline-block;
}

.image {
  width: 200px;
  margin: 0 auto;
  height: 250px;
}

.image img {
  width: 100%;
  height: 100%;
}

＆＃13;

向div添加内容会让它向下移动吗？

2 个答案: