Question

在包装器中使用column-count并且包装器中的容器已应用border-radius，并且容器中的内容溢出时，除第一个列外，所有列中的内容都会完全消失。

以下是我的例子：https://jsfiddle.net/f4nd7tta/
红色半圆只在第一列中可见，为什么？

#main_wrap{
    width:100%;
    border:solid 1px black;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
#main_wrap > div{
    border-radius:5px;
    overflow:hidden;
    position:relative;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
    width:70%;
    height:300px;
    border:solid 2px grey;
    margin:2px;
}
#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
}

<div id="main_wrap">
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>

Answer 1

老实说，我不知道为什么会发生这种情况，我正在查看文档，如果他们已经指定了这种行为，我想检查它是故意还是错误。现在我正在使用

-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);

它有效...所以在#main_wrap > div中添加上述属性，我认为如果排除供应商前缀比transform: translateX(0);足够。

Demo

好的，我认为这是一个错误：

Issue 84030 : CSS 3 Column bug (overflow: hidden like functionality where it shouldn't)

绝对定位的元素被剪裁，好像有一个溢出：隐藏应用于框。但是，应用溢出：可见或任何其他规则无法解决问题

我想的更多，因为我建议我随机插入属性的第一个解决方案并且它有效，还有一种方法可以通过使用clip属性和你合法地做你正在做的事情将不再需要overflow: hidden; ..

#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
    clip: rect(0px,20px,40px,0px);
}

Demo 2 （剪辑演示）

Answer 2

我花了很多时间研究这个问题，并发现了将CSS属性namespace ShareAndCare { public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { services.Configure<CookiePolicyOptions>(options => { // This lambda determines whether user consent for non-essential cookies is needed for a given request. options.CheckConsentNeeded = context => true; options.MinimumSameSitePolicy = SameSiteMode.None; }); services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1); services.AddDbContext<ShareAndCareContext>(options => options.UseLazyLoadingProxies().UseSqlServer( Configuration.GetConnectionString("ShareAndCareContextConnection"))); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env, IServiceProvider serviceProvider) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Home/Error"); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseAuthentication(); app.UseCookiePolicy(); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); } } }添加到列布局内的项目的建议。例如：

will-change: transform;

Answer 3

似乎让子组件 width: 100% 启用了父-父的 columnCount: ${window.innerWidth/300} 抽象以维持子组件的显示，我试图阻止 iOS 专注于我在其中的 <textarea/> .另外一个热点提示是使父-父 height: 100% 和 overflowX: auto 正确......编辑：experimenting with reversal led me to give this answer，并再次修复此错误，但这次使用 columnGap:"1px"< /p>

Answer 4

请找一个我ANSWER的工作示例，我在Firefox＆amp;铬。

CODE HTML
<!--you can add as many divs as you like it will work -->
<div id="main_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CODE CSS
#main_wrap{
  width:100%;
}

#main_wrap > div{
  width:20%; #***
  height:250px; #***
  background:whitesmoke;
  float:left;
  position:relative;
  overflow:hidden;
  border-radius:5px;
  border:2px solid gray;
  margin-left: 10.75%; #***
  margin-bottom:1rem; #***
}

#main_wrap > div:after{
  content:"";
  position:absolute;
  width:40px;
  height:40px;
  background:red;
  border-radius:50%;
  right:-20px;
}

我重新创建了示例中显示的布局，但您可能需要进行一些更改才能获得最终布局。因为它使用标记的（＃***）属性

使用列计数时，溢出的内容在除第一列以外的所有内容中完全消失，为什么？

4 个答案: