Question

您好我在Salesforce1平台上构建了一个应用程序，而且我在使用UI方面遇到了一些问题。如果你看一下最近和流行的想法专栏，从技术上讲它们是并排的，但是最近的想法专栏略低于热门创意专栏，我无法弄清楚如何将它们完全并排。任何帮助将不胜感激。

enter image description here

HTML（忽略顶点标签。由于我必须将其格式化以将其放入此帖子的代码块中，因此缩进有点混乱）

<apex:page standardcontroller="Idea" recordSetVar="idea"
sidebar="false" 
showHeader="false" 
standardstylesheets="false"
doctype="html-5.0">

<head> </head>
<body>

<apex:stylesheet value="{!$Resource.PuroIdeas_Homepage_CSS}" /> 

<div id="header">
  <a href="https://cs3.salesforce.com/apex/PuroIdeas_Home">
      <img id="PuroIdeasLogo" src="{!$Resource.PuroIdeasLogo}"/>
  </a>
  <br/>
  <p id="introCopy" >PuroIdeas is a place where you can innovate. Share your ideas, check out others, join the discussion and help build a better Purolator</p>
</div>

<div id="login">
  <p class="loginText"> Login | Sign Up </p>
</div>

<div id="Challenges">
  <h1 class="ChallengesHeader"> Challenges </h1>
  <div class="activeChallenge">
     <!--   <apex:dataList value="{!ideatheme}" var="i" id="list">
        {!i.title}
        </apex:dataList> 
      <apex:pageblock>
        <apex:outputField value="{!idea.title}" />
      </apex:pageblock> -->


  <p> CHALLENGE 1 - </p>



  </div>
  <div class="activeChallenge">
  <p> CHALLENGE 2 - </p>
  </div>
  <div class="activeChallenge">
  <p> CHALLENGE 3 - </p>
  </div>   
  <!-- Do I need a div for the view all button? -->
</div>

<div id="rpIdeasContainer">
<div id="recentIdeas">
  <h1 class="RecentIdeasHeader"> Recent Ideas </h1>
<div class="rIdeas"> Recent Idea 1</div>
<div class="rIdeas"> Recent Idea 2</div>
<div class="rIdeas"> Recent Idea 3</div>
</div>

<div id="popularIdeas">
  <h1 class="PopularIdeasHeader"> Popular Ideas </h1>
<div class="pIdeas"> Popular Idea 1</div>
<div class="pIdeas"> Popular Idea 2</div>
<div class="pIdeas"> Popular Idea 3</div>
</div>

</div>


<div id="generalFeedback">
  <h1 class="GeneralFeedbackHeader">General Feedback</h1>
  <p>Category <br/> Title <br/> Description</p>
  <apex:form >
     <!-- <apex:inputField ></apex:inputField> -->
     <!-- <apex:commandButton action="{!submit}" value="Submit"/> -->
  </apex:form> 
</div>

<div id="pastChallenges">
  <h1 class="PastChallengesHeader">Past Challenges</h1>
<div class="pChallenge"> Past Challenges 1</div>
<div class="pChallenge"> Past Challenges 2</div>
<div class="pChallenge"> Past Challenges 3</div>
</div>

<div id="ideasInAction">
  <h1 class="IdeasInActionHeader">Ideas In Action</h1>
<div class="IIA"> Idea in Action 1</div>
<div class="IIA"> Idea in Action 2</div>
<div class="IIA"> Idea in Action 3</div>
</div>

</body>

</apex:page>

CSS

#header
{
width: 70%;
border-bottom-style: solid;
border-color: #D1D1D1;
border-width: 2px;
margin-left: auto;
margin-right: auto;
}

#PuroIdeasLogo
{
display: block;
margin-left: auto;
margin-right: auto;
}

#introCopy
{
text-align: center;
font-family: "Segoe UI"; /*Helvetica, Arial;*/
font-weight: lighter;
max-width: 60%;
margin-left: auto;
margin-right: auto;
color: #575757;
}

#login
{
width: 70%;
/*border-bottom-style: solid;
border-color: #D1D1D1;
border-width: 1px;*/
margin-left: auto;
margin-right: auto;
}

.loginText 
{
text-align: center;
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
}

#Challenges
{
width: 70%;
border-bottom-style: solid;
border-color: #D1D1D1;
border-width: 1px;
margin-left: auto;
margin-right: auto; 
}

.ChallengesHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}

.activeChallenge
{
width: 90%;
margin: 20px auto;
padding: 15px;
font-family: "Segoe UI";
font-weight: lighter;
color: #2071FE;
/*background-color: #2071FE;*/
border: 2px solid #2071FE;
border-radius: 15px;
}

#rpIdeasContainer
{
width: 70%; 
margin-left: auto;
margin-right: auto;
border-bottom-style: solid;
border-width: 1px;
border-color:#D1D1D1;

}

#recentIdeas
{
width: 50%;
margin-left: auto;
margin-right: auto;
float:left;

}

.RecentIdeasHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}

.rIdeas
{
width: 85%;
margin: 20px auto;
border: 1px solid red;
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}

#popularIdeas
{
margin-left: 50%;
margin-right: auto;

}

.PopularIdeasHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}

.pIdeas
{
width: 85%;
margin: 20px auto;
border: 1px solid red;
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}

#generalFeedback
{
width: 70%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}

.GeneralFeedbackHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}

#pastChallenges
{
width: 70%;
border-style: dotted;
margin-left: auto;
margin-right: auto;
}

.PastChallengesHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}

.pChallenge
{
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}

#ideasInAction
{
width: 70%;
border-style: dotted;
margin-left: auto;
margin-right: auto;
}

.IdeasInActionHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}
.IIA 
{
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}

Answer 1

尝试在流行的想法div中添加这个

#popularIdeas
{
  vertical-align:middle;
}

或

vertical-align:top;

发生了什么事？如果那不起作用你就可以使用

display: inline-block

关于div（流行的想法和最近的想法）

Answer 2

我会建议不同的东西，你可以使用display属性而不是float属性。您可能需要进行一些更改，例如以下

#recentIdeas {
   width: 50%;
   margin-left: auto;
   margin-right: auto;
   /* float: left; */ /* Removed this */
   vertical-align: top; /* Added this */
   display: inline-block; /* Added this */
}

#popularIdeas
{
    /*margin-left: 50%;*/ /* Removed this */
    margin-right: auto; 
    display:inline-block; /* Added this */
    vertical-align:top /* Added this */
}

Demo

Answer 3

我会修改以下类：

#recentIdeas {
    width: 48%;
    background-color: #FFA500;
    padding: 0px !important;
    margin: 0px !important;
    display: inline-block;
}
#popularIdeas {
    width: 48%;
    background-color: #AFA500;
    padding: 0px !important;
    margin: 0px !important;
    display: inline-block;
}

你可以在这里看到 - ＆gt; http://jsfiddle.net/T2GG4/

希望这有帮助!!!

如何并排排列div而不是略低一些？

3 个答案:

Demo