Question

你好我知道有些人对此有疑问，并且之前已经问过这个问题，但是我尝试了每一个答案，但是没有用。

我的问题 我有一个div，其css命令为 float 对。面板位于右侧但由于某种原因，当窗口调整到一定大小时，div向下移动。

如何解决此问题。

代码。

<p:panel class="MembersPanel" >
        <f:facet name="header">
            <p>
           Psst Members over here!
            </p>
        </f:facet>
    </p:panel>

代码.css

.MembersPanel{

    float:right;  

    padding-left:3px; margin-right: 10px;
    height:450px; 
    width:22%; 
    margin-top: 10px; 


    border-radius: 4px;
}

图片示例。

示例：1

这是常规尺寸的面板。（窗口是100％）;

示例：2

窗户正在减少。请注意，右侧的面板也在减少。我想要那个。

示例：3

这就是我的问题所在。当窗口缩小到一定大小时，右侧面板由于某种原因向下移动。

结论

结束了我的问题。如果您有任何疑问，请不要犹豫，问我。

同时

我正在寻找java ee后端开发人员。大声笑这个网站将需要它！我正在招聘。感谢。

实验变量

整个css代码。

.SlideShowBackground{
    height: 600px;
    width: 100%;
    border:none;
    border-radius: 0;

}
.SlideShowSwitch{
    width: 100%;
    height: 600px;
    border: 0;
    background-image: url("http://assets.coolhunting.com/coolhunting/2015/10/12/large_hoverboard-3.jpg");
    background-size: cover;
}
/*File: VOLhome*/

.center_content{
    width: 100%;
    height:auto;
    display:block;
    overflow: auto;
}

/*File: HOmeVoolvern*/




.InsideleftPanelHoldsProj{
    float:left;
    border:none;
    margin-left: 20px;
    width: 70%;

    margin-left: 70px;
      display:block;
    overflow: auto;

}
.InsideleftPanelHoldsProj .ui-panel{
    float:left;
    height:350px;
    width:32%;
    margin-left: 3px;
    margin-top: 15px;
    border-radius: 0;
position: relative;

}

.**MembersPanel{
    float:right;  

    height:450px; 
    width:22%; 
    margin-top: 20px; 
  padding-left:1%;
margin-right:1%;
border-right:none;
border-left:none;

}**

HTML代码。

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>

    </h:head>
    <h:body>


    <p:panel class="SlideShowBackground">
                    <p:imageSwitch class="SlideShowSwitch" effect="turnDown">
    
</p:imageSwitch>
 
                </p:panel>

                <p:panel class="InsideleftPanelHoldsProj" >
                    <ui:include src="./ProjectsELements.xhtml"/>
                    <f:facet name="footer">
                        <ui:include src="./footer.xhtml"/>
                    </f:facet>
                </p:panel>

        <p:panel class="MembersPanel" >
            <f:facet name="header">
                <p>
               Psst Members over here!
                </p>
            </f:facet>
        </p:panel>




    </h:body>
</html>

Answer 1

如果使用％作为div的宽度，请尝试将其用于填充和边距。

您的新代码

.MembersPanel{

float:right;  

padding-left:[number]%;
margin-right:[number]%;
height:450px; 
width:22%; 
margin-top: 10px; 


border-radius: 4px;
}

Answer 2

你没有发布完整的代码，但是，我会说：在HTML中移动该面板，将放在大屏幕上相同高度的其他框之前。然后t应该保持在该部分的顶部，其他框应该向左和向下浮动。

添加代码后编辑：在正文中，尝试按以下顺序使用HTML：

 <p:panel class="SlideShowBackground">
   <p:imageSwitch class="SlideShowSwitch" effect="turnDown">
    </p:imageSwitch>
 </p:panel>

 <p:panel class="MembersPanel" >
   <f:facet name="header">
     <p>
       Psst Members over here!
     </p>
   </f:facet>
  </p:panel>

  <p:panel class="InsideleftPanelHoldsProj" >
     <ui:include src="./ProjectsELements.xhtml"/>
     <f:facet name="footer">
        <ui:include src="./footer.xhtml"/>
      </f:facet>
  </p:panel>

在调整窗口大小时，Div不会向左浮动

2 个答案: