标签: column-count

我正在尝试在我的页面上创建类似报纸的列.但是,我的页面包含表格,在IE,Chrome,Safari和Opera中,表格被分成两个不同的列;这不是我想要的行为.如果有桌子,我希望完全在一列内.这是一些代码:

.newspaper {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 5px; /* Chrome, Safari, Opera */
    -moz-column-gap: 5px; /* Firefox */
    column-gap: 5px;
}

<div class="newspaper">
  <table>
    <tr><td>Table Row 1</td></tr>
    <tr><td>Table Row 2</td></tr>
    <tr><td>Table Row 3</td></tr>
    <tr><td>Table Row 4</td></tr>
  </table>
  <p>Paragraph</p>
</div>

一个简单的方法来查看问题并摆弄它是使用Chrome并访问http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap并粘贴他们示例中的代码.如果您尝试Firefox,您将看到该表完全位于左列中.

我正在使用column-count和-webkit-column-count创建布局,但我发现了一个多次出现的问题.

正如你从这张图片中看到的那样,Chrome 45(没有在FF中发生)打破了元素的边界,这非常奇怪且非常烦人.这有点突破发生的代码(但我不知道为什么它不会发生在这里,只有区别是字体,并且没有Mayers css重置):

body {
  line-height: 1.5;
}
form {
  -webkit-column-count: 2;
  column-count: 2;
}
label {
  display: block;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin-top: 0.625em;
}
input {
  border: 1px solid green;
  border-radius: 4px;
  padding: 0.25em 0.5em;
}
label>span:first-child {
  width: 5em;
  display: inline-block;
}

<h2>CONFIG:</h2>
<form id="pop_values" action="" class="ng-pristine ng-valid">
  <label>
    <input type="checkbox">
    <span>Mobile</span>
  </label>
  <label>
    <input type="checkbox">
    <span>Animate</span>
  </label>
  <label>
    <span>Frecuency:</span>
    <input type="number">
  </label>
  <label>
    <span>Exclusions:</span>
    <input type="text">
  </label>
</form>

但它没有用.你能给予任何启示吗？

我想在使用CSS 的列数时在每列中使用分隔符。

HTML：

<ul class="channel_list">
    <li><input class="channels" type="checkbox" name="7" value="y">&nbsp;Channel 1</li>
    <li><input class="channels" type="checkbox" name="8" value="y">&nbsp;Channel 2</li>
    <li><input class="channels" type="checkbox" name="9" value="y">&nbsp;Channel 3</li>
    <li><input class="channels" type="checkbox" name="6" value="y">&nbsp;Channel 4</li>
    <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 5</li>
</ul>

CSS：

.channel_list{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
.channel_list li{ list-style: none}

我想要什么-

我尝试：

.channel_list li{ border-right: 5px solid red}

仅边界位于li的右侧，但不在最后一列。

我有一个使用HTML和CSS的2列布局。在这些列中，我有一个选择菜单，将在单击这些列表项之一时显示。我需要相对于单击的项目放置此选择菜单，而不要像传统的选择选项菜单一样影响其周围元素的布局。但是，我不能使用传统选择，因为这是自动建议的输入/菜单。因此，我正在相对放置的父项中为菜单容器使用绝对放置的项。

我想要的是：

我的问题是，绝对定位的项目就像列中的一部分一样在破裂。这违背了我所了解的一切position: absolute，但似乎符合规范。更令人沮丧的是，浏览器会按我的意图显示绝对定位的项目（只要我没有position: relative在父对象上设置），但是我需要position: relative在父对象或选择菜单上设置（作为绝对定位的项目）不会总是显示与其相应元素相邻的元素。

我得到的是：

我还尝试了使用flexbox进行类似列的布局，但是，当我需要按顺序从上到下显示项目时，项目从左到右显示，就像在传统的列式布局中那样。我可以将flexbox与一起使用flex-flow: column wrap，但这将要求我知道/设置容器元素的高度，而我不能这样做。CSS列无需设置高度即可很好地包装列表。

我认为最简单的解决方案是以某种方式伪造绝对定位或使flexbox在不显式设置容器高度的情况下按顺序（从上到下）显示项目。我都尝试了两次，都没有令人满意的结果。我愿意使用JavaScript解决方案，但我会尽力避免使用它，而仅使用CSS来解决。

.columns-two {
  column-count: 2;
  column-width: 300px;
  -moz-column-count: 2;
  -moz-column-width: 300px;
}
.parent {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  position: relative;
}
.highlight {
  background-color: #FFF8DC;
}
.absolute-element {
  width: 200px;
  position: absolute;
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 15px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

<ul class="columns-two">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li> …

我使用了 CSS3 多列功能，使用该column-count属性将其拆分为多列。

这是我的代码：

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

它不适用于我的 Firefox 版本或 Firefox 开发人员版本。代码适用于：Google Chrome、Opera 和 Microsoft Edge。

这是一个错误还是有任何解决方案？

该column-count属性不会影响该表.
HTML:

<table>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
</table>

CSS:

table{
    -moz-column-count: 3; /* Firefox */
    -webkit-column-count: 3; /* Safari and Chrome */
    column-count: 3;
}
td{
    border:2px #000 solid;
}

小提琴:http ://jsfiddle.net/8rydn/

更新:
如果column-count不是在a上使用的好选项<table>,有没有更好的方法将3 <tr>秒移动到每一行？

我正在尝试使用 spark sql 获取 sql server 模式中所有表的行数和列数。

当我使用 sqoop 执行以下查询时，它给了我正确的结果。

sqoop eval --connect "jdbc:sqlserver://<hostname>;database=<dbname>" \
--username=<username> --password=<pwd> \
--query """SELECT 
ta.name TableName ,
pa.rows RowCnt, 
COUNT(ins.COLUMN_NAME) ColCnt FROM <db>.sys.tables ta INNER JOIN 
<db>.sys.partitions pa ON pa.OBJECT_ID = ta.OBJECT_ID INNER JOIN 
<db>.sys.schemas sc ON ta.schema_id = sc.schema_id join 
<db>.INFORMATION_SCHEMA.COLUMNS ins on ins.TABLE_SCHEMA =sc.name and ins.TABLE_NAME=ta.name 
WHERE ta.is_ms_shipped = 0 AND pa.index_id IN (1,0) and sc.name ='<schema>' GROUP BY sc.name, ta.name, pa.rows order by 
TableName"""

但是当我尝试从 spark sql 执行相同的查询时，我收到一个错误“ com.microsoft.sqlserver.jdbc.SQLServerException：关键字'WHERE'附近的语法不正确”请帮助我，如果有人知道这个错误。

下面是我执行 …

我制作了一个高清图,工具提示是以格式显示日期和时间,但它显示错误的日期和时间.

请仔细阅读以下代码.

HTML代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Javascript代码

var maxval="94";
$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({

    credits: {
        enabled: false
    },  
    chart: {
        type: 'column',
        renderTo: 'container',
    },
    title: {
        text: 'Weekly Traffic'
    },
    xAxis: {
        type: 'datetime',
        labels: {
            format: '{value:%d-%b-%Y}',
            rotation:-45,
        },
    },

    yAxis: {
        labels:{enabled: false},
     title: {
              text: ''
           },
    }, 

          tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+': …

我在使用该column-count属性时遇到Chrome问题.我有一个div在里面我会有一些项目所以我设置column-count: 3; 当我有3个项目或更多它运作良好,但当我只有两个时,它们不会显示在同一行但在同一列中.这仅在Chrome上发生.

代码示例:

.userinfo-content .grid-view.author-profile-tabs {
  .column-count(3);
  .column-gap(30);
  .article {
    position:relative;
    display: inline-block;
    margin-bottom: 40px;
    width: 100%;
    line-height: 1.3;
  }
}

我有一个里面有图像的容器.我使用CSS列和媒体查询来确定我的布局.我在底部放了一个段落标签,注意到底部有额外的空间.这就是我在这个小提琴里所说的话.http://jsfiddle.net/sEe7x/11/.奇怪的是在黄色和橙色的断点处发生.有谁知道是什么原因造成的？

这是我的代码

-- HTML --

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width" />

    <title>Portraits</title>
    <meta name="description" content="">

    <link href='http://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>


</head>
<body class="photography">
    <nav class="site_navigation cf">
    <ul id="nav_drop" class="nav_links cf">
        <li class="nav_home"><a href="#">Home</a></li>
        <li class="nav_blog"><a href="#">Blog</a></li>
        <li class="nav_photography"><a href="#">Photography</a></li>
        <li class="nav_projects"><a href="#">Projects</a></li>
        <li class="nav_contact"><a href="#">Contact</a></li>
    </ul>
</nav>
        <div class="main photography_wrapper">        



            <h1>Portraits</h2>

            <div class="gallery_wrapper">
                    <a href="#"><img src="http://placedog.com/400/400" alt=""></a> 
                    <a href="#"><img src="http://placedog.com/400/400" alt=""></a> 
                    <a href="#"><img src="http://placedog.com/400/400" alt=""></a> 
                    <a href="#"><img src="http://placedog.com/400/400" alt=""></a> 
                    <a href="#"><img …

首先,我在这里发现了问题,但答案不太适合我的情况,这就是为什么我问一个问题,这看似相似但不是.如果这在某种程度上有意义:-D

我正在创建一个儿童主义的"响应性"-Wordpresstheme来自cyberchimps.

为此,我需要文本在3列中进行整形,但也可以在网站的后端进行编辑.我用CCS管理过:

.col-940{
    clear: none;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -webkit-column-gap: 40px;
    -moz-column-count: 3; /* Firefox */
    -moz-column-gap: 40px; 
    column-count: 3;
    column-gap: 40px;
}

p {
    margin: 5px 0px 0px 0px;
}

现在产生问题,第一列比下面的列低5px.我无法弄清楚为什么.

如上所述,其他线程中的答案将不起作用,因为我还有仅使用2列的子站点,这就是为什么我不能使用定义的宽度.在文本所在的div之上/之前总是只有另一个div.

(PHP)文本所在的容器:

<?php if( have_posts() ) : ?>

    <?php while( have_posts() ) : the_post(); ?>

        <?php responsive_entry_before(); ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <?php responsive_entry_top(); ?>

            <div class="post-entry">
                <?php the_content( __( 'Read more &#8250;', 'responsive' ) ); ?> …

Chrome中的列列表有一个奇怪的错误:当您单击1+列(而不是第一列)中的第一个链接时,该项目将列向下移动~5px.

这是一个错误吗？我可以通过一些CSS规则来阻止它吗？

经过测试的Chrome版本:39.0.2171.71米

在Chrome中测试此内容(小提琴链接):

ul {
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

<ul>
  <li><a href="#">Item 1</a>
  </li>
  <li><a href="#">Item 1</a>
  </li>
  <li><a href="#">Item 1</a>
  </li>
</ul>