Question

我有3个div，2个向左浮动而另一个向右浮动。但是它没有按照我想要的方式对齐。

function runQuery() {
  // Replace this value with the project ID listed in the Google
  // Cloud Platform project.
  var projectId = 'XXXXXXXX';

  var request = {
    query: 'SELECT TOP(word, 300) AS word, COUNT(*) AS word_count ' +
      'FROM publicdata:samples.shakespeare WHERE LENGTH(word) > 10;'
  };
  var queryResults = BigQuery.Jobs.query(request, projectId);
  var jobId = queryResults.jobReference.jobId;

  // Check on status of the Query Job.
  var sleepTimeMs = 500;
  while (!queryResults.jobComplete) {
    Utilities.sleep(sleepTimeMs);
    sleepTimeMs *= 2;
    queryResults = BigQuery.Jobs.getQueryResults(projectId, jobId);
  }

  // Get all the rows of results.
  var rows = queryResults.rows;
  while (queryResults.pageToken) {
    queryResults = BigQuery.Jobs.getQueryResults(projectId, jobId, {
      pageToken: queryResults.pageToken
    });
    rows = rows.concat(queryResults.rows);
  }

  if (rows) {
    var spreadsheet = SpreadsheetApp.create('BiqQuery Results');
    var sheet = spreadsheet.getActiveSheet();

    // Append the headers.
    var headers = queryResults.schema.fields.map(function(field) {
      return field.name;
    });
    sheet.appendRow(headers);

    // Append the results.
    var data = new Array(rows.length);
    for (var i = 0; i < rows.length; i++) {
      var cols = rows[i].f;
      data[i] = new Array(cols.length);
      for (var j = 0; j < cols.length; j++) {
        data[i][j] = cols[j].v;
      }
    }
    sheet.getRange(2, 1, rows.length, headers.length).setValues(data);

    Logger.log('Results spreadsheet created: %s',
        spreadsheet.getUrl());
  } else {
    Logger.log('No rows returned.');
  }
}

这是一个片段，让您了解什么问题; https://jsfiddle.net/rnty32gt/

我希望类numb3与numb1对齐。我试图使用inlineblock但它无法正常工作。抱歉我的英文。

Answer 1

使用此css和html

进行此方式

＆＃13;

.numb2 ,.numb3  {
    padding: 0;
    text-align: left;
    border: 1px solid #c4c4c4;
    margin: 5px 0;
    background: linear-gradient(180deg,#fff 0,#e6e6e6);
}

.numb1 {
	float: left;
    width: 60%;
}

.numb3 {
	float: right;
    width: 35%;
}

＆＃13;

<!DOCTYPE html>
<html>
<body>
<h1>The float Property</h1>

<div class="numb1">
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. 
</div><div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. 
</div></div><div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>

</body>
</html>

＆＃13;

Answer 2

这就是你可以按照自己的意愿修复它的方法。但你也可以使用flex-box。以下是有关flex-box的一些信息：https://www.w3schools.com/css/css3_flexbox.asp

＆＃13;

div {
    padding: 0;
    text-align: left;
    border: 1px solid #c4c4c4;
    margin: 5px 0;
    background: linear-gradient(180deg,#fff 0,#e6e6e6);
}

.numb1, .numb2 {
	float: left;
    width: 60%;
}

.numb3 {
	float: right;
    width: 35%;
}

＆＃13;

<h1>The float Property</h1>

<div class="numb1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. 
</div>

<div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>

<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. 
</div>

＆＃13;

因此，您可以看到我在HTML中更改了div2和div3的顺序。

Answer 3

你去。

div {
    padding: 0;
    text-align: left;
    border: 1px solid #c4c4c4;
    margin: 5px 0;
    background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.wrap-l
{
  margin:0px;
  float: left;
    width: 60%;
    border:none;
}
.numb1, .numb2 {
	
}

.numb3 {
	float: right;
    width: 35%;
}

<div class="wrap-l">
<div class="numb1">
Text 1 
</div>

<div class="numb2">
Text 2 
</div>
</div>
<div class="numb3">
Text 3
</div>

Answer 4

DOE，

如果你想 div.numb3 与 div.numb1 对齐，你应该改变这样的顺序：

＆＃13;

div {
    padding: 0;
    text-align: left;
    border: 1px solid #c4c4c4;
    margin: 5px 0;
    background: linear-gradient(180deg,#fff 0,#e6e6e6);
}

.numb1, .numb2 {
	float: left;
    width: 60%;
}

.numb3 {
	float: right;
    width: 35%;
}

＆＃13;

<!DOCTYPE html>
<html>
<body>
<h1>The float Property</h1>

<div class="numb1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. 
</div>

<div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>

<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. 
</div>

</body>
</html>

＆＃13;

Answer 5

给出宽度：30％;对于numb1和numb 2

Answer 6

如果你想使用浮点数，只需将.numb3放在标记中的其他div之上：https://jsfiddle.net/5vbvjwcs/

否则你可以使用flex：

PublishSubject

section {
  display: flex;
}

.leftColumn {
  width: 60%;
}

.content {
  padding: 10px;
  background-color: #eaeaea;
  margin: 10px;
  flex: 1;
}

CSS左对齐2向左浮动和1向右浮动

6 个答案: